---
name: lottie-integration
description: Animações Lottie em vídeo — fluxo Figma/AE → Bodymovin → Lottie JSON → Remotion/HyperFrames. Ideal pra ícones, logos animados, micro-interações.
owner: "@web-designer"
shared_with: ["@brand-director", "@web-designer"]
version: 1.2
tags: [lottie, after-effects, figma, animation, vector, motion]
---

# Skill: Lottie Integration

## O que é Lottie

Formato JSON de animação vetorial (Airbnb). Renderiza:
- **Web**: lottie-web, dotLottie
- **Mobile**: nativo iOS/Android
- **Video**: Remotion via `@remotion/lottie` OR HyperFrames via `lottie-player`

**Vantagem absurda:** arquivo de 10KB faz animação que em MP4 seria 500KB. Resolução infinita (vetor).

## Quando usar

✅ **Sim:**
- Ícones animados (check, loading, sucesso, erro)
- Logos animados (intro de marca)
- Ilustrações vetoriais animadas
- Micro-interações (botão hover, toggle)
- Confetti, celebrações, social proof
- Personagens cartoon

❌ **Não:**
- Vídeo fotográfico/footage
- Efeitos de pixel (glitch, grain)
- 3D
- Vídeo com áudio embarcado

## Fluxo completo

```
1. DESIGN     → Figma OR After Effects
2. EXPORT     → Bodymovin (AE) ou Aninix/LottieFiles (Figma)
3. OPTIMIZE   → lottiefiles.com/tools/lottie-optimizer
4. EMBED      → Remotion <Lottie> ou HyperFrames <lottie-player>
5. CONTROL    → seekable, scrubbable, programmatic
```

## Fontes de Lotties prontos

| Fonte | URL | Licença |
|---|---|---|
| LottieFiles Free | lottiefiles.com/featured-free-animations | Free + premium |
| Icons8 Lottie | icons8.com/animated-icons | Free com atribuição |
| IconScout | iconscout.com/lotties | Premium |
| Aninix | aninix.com | Free + premium |
| LordIcon | lordicon.com | Premium (alta qualidade) |

@web-designer deve ter um **biblioteca curada** em `/assets/lottie/` por categoria:
- `success/` — checks, applauses
- `loading/` — spinners, progress
- `social-proof/` — counters, badges
- `logos/` — variações animadas do logo @brand-director
- `transitions/` — between scenes

## Remotion integration

```bash
npm i @remotion/lottie
```

```tsx
import { Lottie } from "@remotion/lottie";
import animationData from "./success-check.json";

<Lottie
  animationData={animationData}
  loop={false}
  playbackRate={1.0}
  style={{ width: 400, height: 400 }}
/>
```

### Seek manual (sincronizar com timeline)

```tsx
import { useCurrentFrame, useVideoConfig } from "remotion";
import { Lottie } from "@remotion/lottie";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const time = frame / fps;

<Lottie
  animationData={data}
  // Lottie auto-syncs com frame via Remotion
/>
```

### Trigger em frame específico

```tsx
const startFrame = 30;
<Sequence from={startFrame}>
  <Lottie animationData={data} />
</Sequence>
```

## HyperFrames integration

```html
<lottie-player
  src="success.json"
  data-hf-lottie
  autoplay="false"
  data-start="2"
  data-duration="3"
  data-track-index="5">
</lottie-player>
```

HyperFrames descobre automaticamente e faz seek determinístico.

## Otimização (regra de ouro)

**Lottie >200KB = revisar.**

```bash
# Otimizar via CLI (lottie-cli)
npx lottie-cli optimize input.json --output optimized.json --quality 0.7
```

**Checklist de otimização:**
- [ ] Sem fontes embarcadas (vincular externa)
- [ ] Sem imagens base64 (substituir por shapes)
- [ ] Path data simplificado (`bezier` em vez de centenas de pontos)
- [ ] Sem keyframes redundantes
- [ ] Convertido pra dotLottie (`.lottie`) — 60% menor

## Animação custom (After Effects → Lottie)

Quando @brand-director entrega arte estática, @web-designer pode pedir **animação custom em AE** se for crítico. Fluxo:

1. **AE**: animar comp em 30-60fps, max 5 segundos
2. **Bodymovin** (extension AE): export
3. **Validar**: `lottiefiles.com/tools/lottie-player` (abre o JSON e testa)
4. **Otimizar**: `lottie-cli optimize`
5. **Salvar**: `assets/lottie/{categoria}/{nome}.json`

**Configs do Bodymovin pra Lottie limpo:**
- Glyphs (ON) — converte texto pra path
- Hidden layers (OFF) — descarta
- Expressions (LIMIT) — Lottie suporta poucas
- Standalone (ON) — inclui dependências

## Casos de uso reais @web-designer

### Logo intro animado (3s)
```
Frame 0-15: logo aparece de 0 → 1 (scale + fade)
Frame 15-60: shimmer passa por cima (Lottie)
Frame 60-90: settle + idle breathing
```

### Counter de social proof
```
Texto "10.000 alunos" + ao lado Lottie de confetti
Trigger: counter terminar de subir → Lottie play()
```

### Botão de CTA pulsante
```
Lottie de pulse (loop 1.5s)
Sincronizar com final do vídeo (último 3s pulsing)
```

### Transição entre cenas
```
Lottie de "swipe" full screen (0.5s)
Cobre o corte abrupto entre cena A e B
```

## Cores e brand-aware

Lottie tem **theming** — trocar cor em runtime:

```tsx
// Em Remotion
<Lottie
  animationData={data}
  // override colors
/>
```

Mais robusto: editar o JSON diretamente:
```js
// Substitui todas ocorrências de azul Lottie default pelo azul brandbook
const themed = JSON.parse(JSON.stringify(animationData));
walkAndReplace(themed, [0, 0.5, 1, 1], picassoBrandbook.primaryRGBA);
```

Ferramenta: `lottiefiles.com/editor` permite editar cor visual.

## Anti-patterns

❌ Lottie de 2MB no projeto (não otimizado)
❌ Lottie com `loop: true` no meio do vídeo (entra em conflito com timeline)
❌ Lottie com áudio embarcado (Remotion ignora)
❌ Texto importante DENTRO do Lottie (não traduz)
❌ Lottie como background loop (matar performance)
❌ Lottie em vez de simples CSS animation (overkill)

## Performance

- Max **3-4 Lotties simultâneos** em tela (cada um é canvas/SVG)
- Preferir **SVG renderer** pra texto, **Canvas renderer** pra muitas formas
- **dotLottie** (`.lottie`) é 60% menor que `.json`
- Cache no `assets/lottie/` com filename `{hash}.lottie`

## Quando custom vs free

| Caso | Custom | Free |
|---|---|---|
| Logo da marca animado | ✅ | ❌ |
| Ícone de check sucesso | ❌ | ✅ |
| Personagem único da marca | ✅ | ❌ |
| Confetti genérico | ❌ | ✅ |
| Loader corporate | ✅ | ❌ |

Custos referência: LottieFiles Premium $9/mo. AE freelancer animação 5s custom: R$200-800.

## Pipeline @web-designer (decisão)

```
Recebo briefing com necessidade de animação vetorial:
1. Já tenho Lottie em /assets/lottie/? → usar
2. Achei free em LottieFiles que combina? → baixar, otimizar, salvar
3. É elemento de marca crítico? → pedir custom AE (orçamento ao TheBoss)
4. Pode ser CSS animation simples? → não usar Lottie (overkill)
```

## Referências

- @remotion/lottie: https://www.remotion.dev/docs/lottie
- LottieFiles: https://lottiefiles.com
- Bodymovin AE: https://aescripts.com/bodymovin/
- dotLottie spec: https://dotlottie.io
