> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/docs.facephi-pt-br/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md).

# customAnimations

## Detalhes

**Atributo:** `custom-animations`

**Tipo:** `string` | `CustomAnimations`

**Valor por padrão:** `undefined`

## Morfologia

```typescript
provider.customAnimations = {
  sdkProvider: { loading: '/assets/anim/loading.json' },
};
```

## Descrição

JSON ou objeto com rotas de animações (Lottie, GIF, MP4) compartilhadas entre `facephi-sdk-provider`, `facephi-selphi-widget`, `facephi-selphid-widget` e outros filhos. A configuração pode ser parcial: os componentes sem valor definido usam suas animações padrão.

### Considerações

Se você definir a mesma animação aqui e em uma prop direta (por ex. `loadingAnimation`), `customAnimations` tem prioridade. Valores inválidos são reportados no console.

### Informações adicionais

**Estrutura disponível:**

* **sdkProvider**
  * `carregando` (`string`): Animação de carregamento do provider.
* **fileUploader**
  * `loadingFile` (`string`): Animação de carregamento de arquivo.
* **qr**
  * `selphi` (`string`): Pré-visualização desktop durante a captura Selphi no mobile.
  * `selphid` (`string`): Pré-visualização desktop durante a captura SelphID no mobile.
  * `fileUploader` (`string`): Pré-visualização desktop durante o envio de arquivos no mobile.
* **selphi**
  * `carregando` (`string`): Animação de carregamento de Selphi.
  * `tutorial` (`string[]`): Animações do tutorial.
  * `initialTip` (`object`): Animação da dica prévia de Selphi.
    * `mobile` (`string`): Dica prévia na visualização mobile.
    * `desktop` (`string`): Dica prévia na visualização desktop.
* **selphid**
  * `carregando` (`string`): Animação de carregamento de SelphID.
  * `tutorial` (`string[]`): Animações do tutorial.
  * `initialTip` (`object`): Animação da dica prévia de SelphID.
    * `mobile` (`string`): Dica prévia na visualização mobile.
    * `desktop` (`string`): Dica prévia na visualização desktop.

***

## Exemplo

```jsx
<facephi-sdk-provider
    apikey={process.env.FACEPHI_SDK_APIKEY}
    customAnimations={{
        sdkProvider: { loading: '/assets/anim/custom-loading.gif' },
        selphi: {
            loading: '/assets/anim/custom-loading.gif',
            initialTip: {
                mobile: '/assets/anim/custom-tip-mobile.gif',
                desktop: '/assets/anim/custom-tip-desktop.gif',
            },
        },
        selphid: {
            loading: '/assets/anim/custom-loading.gif',
            initialTip: {
                mobile: '/assets/anim/custom-tip-mobile.gif',
                desktop: '/assets/anim/custom-tip-desktop.gif',
            },
        },
        qr: {
            selphi: '/assets/anim/desktop-selphi.gif',
            selphid: '/assets/anim/desktop-selphid.gif',
        },
    }}
>
    <facephi-selphi-widget />
</facephi-sdk-provider>
```