# Embedding Patterns
## Plain HTML (No Framework)
**IMPORTANT**: Use `@lottiefiles/lottie-player@2.0.3`, NOT `dotlottie-wc`. The dotlottie web component breaks on live domains and Vercel deploys. The lottie-player tag is stable and battle-tested.
Add the script tag once, then use the web component anywhere.
```html
```
No npm install required. The web component registers itself globally.
### Self-hosting animation JSON
`.lottie` files are just zip archives containing JSON. For plain HTML deploys, extract and self-host:
```bash
# Download the .lottie file
curl -o animation.lottie "https://lottie.host/{id}/animation.lottie"
# Extract (it's a zip)
mkdir -p lotties/json
cd lotties/json
unzip ../../animation.lottie
# The JSON file inside is your animation
```
Then reference the JSON file path in the `src` attribute. This avoids CORS issues and dependency on CDN availability.
### lottie-player props
```html
```
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `src` | string | required | URL or path to `.json` animation file |
| `background` | string | transparent | Canvas background color |
| `speed` | string | "1" | Playback speed |
| `loop` | boolean | false | Loop the animation (attribute presence = true) |
| `autoplay` | boolean | false | Auto-start (attribute presence = true) |
| `hover` | boolean | false | Play on hover only |
| `direction` | "1" \| "-1" | "1" | Forward or reverse |
| `mode` | string | "normal" | "normal", "bounce" |
## React / Next.js
```bash
npm install @lottiefiles/dotlottie-react
```
```tsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
function LoadingAnimation() {
return (
);
}
```
### With playback control (ref callback)
```tsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import { useState } from 'react';
import type { DotLottie } from '@lottiefiles/dotlottie-web';
function ControlledAnimation() {
const [dotLottie, setDotLottie] = useState(null);
return (
<>
);
}
```
## Vue / Nuxt
```bash
npm install @lottiefiles/dotlottie-vue
```
```vue
```
### With playback control
```vue
```
## Svelte / SvelteKit
```bash
npm install @lottiefiles/dotlottie-svelte
```
```svelte
```
### With playback control
```svelte
```
## Common Props (All Frameworks)
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `src` | string | required | URL to `.lottie` or `.json` file |
| `autoplay` | boolean | false | Start playing immediately |
| `loop` | boolean | false | Loop the animation |
| `speed` | number | 1 | Playback speed (0.5 = half, 2 = double) |
| `backgroundColor` | string | transparent | Canvas background color |
| `direction` | 1 \| -1 | 1 | Forward (1) or reverse (-1) |
| `mode` | string | "forward" | "forward", "reverse", "bounce", "reverse-bounce" |
| `segment` | [number, number] | - | Play only frames [start, end] |
## Series Barrel File Pattern
When embedding multiple related animations, create a central config:
```typescript
// src/animations/index.ts
export const animations = {
loading: "https://lottie.host/abc123/loader.lottie",
success: "https://lottie.host/def456/check.lottie",
error: "https://lottie.host/ghi789/error.lottie",
empty: "https://lottie.host/jkl012/empty.lottie",
notFound: "https://lottie.host/mno345/404.lottie",
} as const;
export type AnimationKey = keyof typeof animations;
```
### React series wrapper
```tsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import { animations, type AnimationKey } from '@/animations';
interface LottieAnimationProps {
name: AnimationKey;
size?: number;
loop?: boolean;
speed?: number;
}
export function LottieAnimation({ name, size = 200, loop = true, speed = 1 }: LottieAnimationProps) {
return (
);
}
```
Usage: ``
### Vue series wrapper
```vue
```
### Svelte series wrapper
```svelte
```
## Speed Guidelines by Brand Energy
| Brand Energy | Speed Value | Effect |
|-------------|-------------|--------|
| Quiet / Minimal | 0.5 - 0.75 | Slow, meditative motion |
| Balanced / Professional | 0.8 - 1.0 | Natural pace |
| Energetic / Playful | 1.0 - 1.5 | Upbeat, responsive |
| Urgent / Dynamic | 1.5 - 2.0 | Fast, attention-grabbing |