···66export * from './image-masonry';
77export * from './confetti';
88export * from './animated-text';
99+export * from './lottie';
1010+export * from './atmosphere-animation';
···11+## Usage
22+33+A prebuilt Atmosphere hero animation, perfect for atproto/Bluesky login screens. Both `lottie-web` and the animation JSON are lazy-loaded, so they only download when the component mounts.
44+55+```svelte
66+<AtmosphereAnimation class="max-w-xl" />
77+```
88+99+Set size with regular classes. Defaults to `aspect-video w-full`.
···11+## Usage
22+33+Renders a Lottie animation using the [dotLottie web runtime](https://github.com/LottieFiles/dotlottie-web) (WASM + canvas). Unlike `<Lottie>`, this supports the **Slots API** — a first-class runtime theming system.
44+55+Accepts both `.lottie` and plain `.json` animations:
66+77+```svelte
88+<DotLottie src="/my-anim.lottie" class="aspect-video max-w-xl" />
99+```
1010+1111+### Theming with slots
1212+1313+The animation JSON must have properties tagged with `sid` values per the [Lottie Slots spec](https://lottie.github.io/lottie-spec/latest/specs/helpers/#slots). Then pass a `slots` prop mapping slot id → CSS color:
1414+1515+```svelte
1616+<DotLottie
1717+ src="/my-anim.lottie"
1818+ slots={{
1919+ Background: 'var(--color-base-100)',
2020+ Primary: 'var(--color-accent-500)'
2121+ }}
2222+/>
2323+```
2424+2525+Slots re-apply automatically when the theme changes or when the `slots` prop updates.
2626+2727+### `<Lottie>` vs `<DotLottie>`
2828+2929+**`<Lottie>`**
3030+- Runtime: `lottie-web` (SVG)
3131+- Theming: `colorMap` — replaces matching source colors anywhere in the file
3232+- Works on any existing animation
3333+- Lighter bundle
3434+3535+**`<DotLottie>`**
3636+- Runtime: `@lottiefiles/dotlottie-web` (WASM + canvas)
3737+- Theming: `slots` — requires the animation to be authored with `sid` markers
3838+- Heavier bundle (WASM renderer)
3939+- Use when you control the animation and want reliable, name-based theming
···11+## Usage
22+33+Render a Lottie animation. `lottie-web` is dynamically imported, so it's only downloaded when a `Lottie` component actually mounts.
44+55+### From a URL
66+77+```svelte
88+<Lottie src="/my-animation.json" class="aspect-video max-w-xl" />
99+```
1010+1111+### From imported JSON
1212+1313+Import the animation data directly (bundled as its own chunk):
1414+1515+```svelte
1616+<script lang="ts">
1717+ import animationData from './my-animation.json';
1818+</script>
1919+2020+<Lottie data={animationData} />
2121+```
2222+2323+> **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.
2424+>
2525+> ```svelte
2626+> let anim = $state.raw(animationData);
2727+> ```
2828+2929+Set the size with regular classes — the underlying SVG fills the container.
3030+3131+### Theming colors
3232+3333+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)`:
3434+3535+```svelte
3636+<Lottie
3737+ src="/my-anim.json"
3838+ colorMap={{
3939+ '#000000': 'var(--color-base-900)',
4040+ '#ff0000': 'var(--color-accent-500)'
4141+ }}
4242+/>
4343+```
4444+4545+CSS variables are resolved from the document's computed styles at mount.
4646+