# Lottie

## Example

```svelte
<script lang="ts">
	import { Lottie, Box } from '@foxui/all';

	const colorMap = {
		'#53aaa7': 'var(--color-accent-500)',
		'#6294a1': 'var(--color-accent-600)',
		'#6dd3cd': 'var(--color-accent-400)',
		'#8dcaac': 'var(--color-accent-400)',
		'#a7e2c4': 'var(--color-accent-300)',
		'#bd91b6': 'var(--color-accent-300)',
		'#dba9d3': 'var(--color-accent-200)',
		'#edc9e9': 'var(--color-accent-100)',
		'#fa7563': 'var(--color-accent-700)',
		'#dec579': 'var(--color-accent-200)',
		'#494f5c': 'var(--color-base-800)',
		'#749ca8': 'var(--color-accent-600)',
		'#fbf6ec': 'var(--color-base-50)'
	};
</script>

<Box class="not-prose flex items-center justify-center">
	<Lottie src="/example.lottie.json" {colorMap} class="aspect-video max-w-xl" />
</Box>
```

## Documentation

## Usage

Render a Lottie animation. `lottie-web` is dynamically imported, so it's only downloaded when a `Lottie` component actually mounts.

### From a URL

```svelte
<Lottie src="/my-animation.json" class="aspect-video max-w-xl" />
```

### From imported JSON

Import the animation data directly (bundled as its own chunk):

```svelte
<script lang="ts">
	import animationData from './my-animation.json';
</script>

<Lottie data={animationData} />
```

> **Heads up:** if you need to hold the animation data in reactive state, use `$state.raw` (not `$state`). Lottie JSON is large and nested — Svelte's deep state proxy breaks `structuredClone`, which is used internally for `colorMap` recoloring.
>
> ```svelte
> let anim = $state.raw(animationData);
> ```

Set the size with regular classes — the underlying SVG fills the container.

### Theming colors

Swap any color baked into the Lottie JSON to match your theme. Keys are the source colors in the animation, values are any CSS color — hex, `rgb()`, or `var(--token)`:

```svelte
<Lottie
	src="/my-anim.json"
	colorMap={{
		'#000000': 'var(--color-base-900)',
		'#ff0000': 'var(--color-accent-500)'
	}}
/>
```

CSS variables are resolved from the document's computed styles at mount.

## API Reference

### Lottie
Renders a Lottie animation. lottie-web is lazy-loaded on mount so it only ships when used.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| src | `string` | `-` | URL to a Lottie animation JSON file. |
| data | `unknown` | `-` | Parsed animation JSON. Takes precedence over src. |
| loop | `boolean` | `true` | Whether to loop the animation. |
| autoplay | `boolean` | `true` | Whether to start playing on mount. |
| renderer | `'svg' | 'canvas' | 'html'` | `'svg'` | Lottie renderer to use. |
| colorMap | `Record<string, string>` | `-` | Map of source → target colors. Recolors the animation JSON before rendering. Values can be hex, rgb(), or var(--token). |