> 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/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md).

# customAnimations

## Detalles

**Atributo:** `custom-animations`

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

**Valor por defecto:** `undefined`

## Morfología

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

## Descripción

JSON u objeto con rutas de animaciones (Lottie, GIF, MP4) compartidas entre `facephi-sdk-provider`, `facephi-selphi-widget`, `facephi-selphid-widget` y otros hijos. La configuración puede ser parcial: los componentes sin valor definido usan sus animaciones por defecto.

### Consideraciones

Si defines la misma animación aquí y en una prop directa (p. ej. `loadingAnimation`), `customAnimations` tiene prioridad. Valores no válidos se reportan en consola.

### Información adicional

**Estructura disponible:**

* **sdkProvider**
  * `loading` (`string`): Animación de carga del provider.
* **fileUploader**
  * `loadingFile` (`string`): Animación de carga de archivo.
* **qr**
  * `selphi` (`string`): Previsualización desktop durante captura Selphi en móvil.
  * `selphid` (`string`): Previsualización desktop durante captura SelphID en móvil.
  * `fileUploader` (`string`): Previsualización desktop durante subida de archivos en móvil.
* **selphi**
  * `loading` (`string`): Animación de carga de Selphi.
  * `tutorial` (`string[]`): Animaciones del tutorial.
  * `initialTip` (`object`): Animación del tip previo de Selphi.
    * `mobile` (`string`): Tip previo en vista mobile.
    * `desktop` (`string`): Tip previo en vista desktop.
* **selphid**
  * `loading` (`string`): Animación de carga de SelphID.
  * `tutorial` (`string[]`): Animaciones del tutorial.
  * `initialTip` (`object`): Animación del tip previo de SelphID.
    * `mobile` (`string`): Tip previo en vista mobile.
    * `desktop` (`string`): Tip previo en vista desktop.

***

## Ejemplo

```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>
```