Cinco bifurcações claras a partir de uma pergunta central — identifique o tipo de motion e a lib certa aparece.
🗺️ A matriz completa das 5 libs
Cada biblioteca tem uma zona de vitória clara. Usar a certa significa resultado rápido; usar a errada significa iterar contra a ferramenta. A matriz abaixo é o guia definitivo.
| Biblioteca | Melhor para | Exemplo típico | Quando NÃO usar |
|---|---|---|---|
| GSAP | Timeline estruturada, coreografia fixa | SaaS intro, launch video, sequência de textos | Movimento reativo / físico (use Framer) |
| D3 | Dados que viram história animada | Bar chart race, mapa de calor, linha do tempo | Animações sem dado (GSAP é mais simples) |
| Three.js | Cenas 3D renderizadas como frames | Rotação de produto, flythrough, explainer 3D | Animações 2D simples (overkill) |
| Lottie | Micro-animações leves e rápidas | Social clip, onboarding, ícone de marca | Cenas complexas ou com dado (use GSAP / D3) |
| Framer Motion | Movimento reativo, físico, spring | UI interativa, transições de página, drag | Timeline fixa de vídeo (use GSAP) |
🎞️ GSAP — quando a coreografia é a mensagem
GSAP é a escolha para qualquer vídeo onde a sequência importa: texto que entra em cena, elementos que se revelam em ordem, coreografia fixada na timeline. SaaS intros, launch videos, apresentações de produto.
GSAP sobre Framer para coreografia fixa
Framer Motion é ótimo para movimento reativo (usuário interage, UI responde). Mas em vídeo renderizado, a timeline é fixa — GSAP mapeia isso diretamente. Framer adiciona camada de abstração de física que não faz sentido sem interação.
Framer para movimento reativo e físico
Quando o vídeo simula uma UI interativa (drag, spring, inércia), Framer entrega a física real. É o único caso onde Framer vence GSAP dentro do Remotion.
📊 D3 e Three.js — especialistas de domínio
D3 e Three.js são especialistas: cada um resolve um problema muito específico melhor do que qualquer outra lib. Fora desse domínio, são overengineering.
📊 D3 — dado vira animação
Alimente o dado, descreva o gráfico, o Claude renderiza. D3 é a única lib onde o dado e a animação vivem no mesmo modelo — você não precisa converter, mapear ou sincronizar manualmente.
- ✓Bar chart race com dados reais
- ✓Linha do tempo interativa (no vídeo)
- ✓Mapa de calor com transição
🧊 Three.js — perspectiva real
Para qualquer coisa que exija profundidade tridimensional, iluminação e câmera — Three.js é o único caminho. Vanilla para simples; R3F quando precisa de composição em componentes.
- ✓Rotação de produto 3D
- ✓Flythrough de ambiente
- ✓Animação explicativa 3D
💡 Regra de escolha entre D3 e Three.js
Tem dado? Use D3. Tem z-axis? Use Three.js. Se você está pensando "será que serve aqui?", provavelmente serve — mas se precisou pensar, talvez GSAP seja mais simples para o caso.
✨ Lottie — velocidade acima de tudo
Lottie é a escolha quando velocidade importa mais que complexidade. Micro-conteúdo, social clips, onboarding — o caminho mais rápido de prompt a saída production-ready. A lib que o Claude mais acerta na primeira.
Motion limpo e loop perfeito. O tipo que funciona em Reels sem parecer feito por software.
Ilustrações que se movem para guiar o usuário. Leve, carrega rápido, padrão do mercado mobile.
Ícones animados, loading screens, confirmações. Pequenos toques que fazem a identidade ganhar vida.
🔷 Quando Lottie perde
Animações com dado estruturado (use D3), coreografias longas (use GSAP) ou cenas 3D (use Three.js). Fora dessas exceções, se você está em dúvida entre Lottie e GSAP para algo simples, escolha Lottie — mais rápido.
🔮 As 4 regras universais
Independente de qual lib você escolher, quatro regras valem sempre. São os princípios que fazem Claude Code + Remotion funcionar bem com qualquer biblioteca.
Instale a skill antes de tudo
Os 28 rule files de Remotion no contexto do Claude são o que garante que o código gerado seja correto para render de vídeo. Sem a skill, o Claude gera código de browser — não de render.
Comece com a versão mais simples
Qualquer cena funciona com menos elementos do que você pensa. Um cubo antes de uma cena completa; um gráfico antes de um dashboard. Simples entrega em um prompt; complexo precisa de vários.
Itere na mesma sessão
O contexto da cena fica no Claude enquanto a sessão dura. Ajustes de cor, velocidade, geometria ou layout são prompts de follow-up — não novos prompts do zero.
Render com as configurações certas
FPS, resolução e codec afetam a qualidade final. Antes de renderizar, confirme as configurações do remotion.config.ts — a skill orienta os valores certos.
🚀 Trilha 2 concluída — o que vem a seguir
Você agora tem o mapa completo das libs e as regras universais. A Trilha 3 — Projetos coloca tudo isso em prática: projetos completos end-to-end com cada biblioteca, do prompt ao MP4 final.
✗ O que não funciona sem o mapa
- ✗Escolher a lib por familiaridade, não por tipo de motion.
- ✗Usar GSAP para tudo — funciona, mas complexidade desnecessária.
- ✗Tentar dados com Three.js — D3 é a ferramenta certa.
✓ Com o mapa na cabeça
- ✓Primeiro prompt já usa a lib certa — menos iteração.
- ✓Saída production-ready mais rápida.
- ✓Claude gera código mais confiável quando a lib é a certa para o problema.
🎯 Na Trilha 3 você vai
- →Construir um vídeo de SaaS intro do zero com GSAP.
- →Criar um bar chart race com D3 a partir de dados reais.
- →Renderizar uma cena 3D de produto com Three.js.
- →Compor um social clip completo com Lottie.
📌 Resumo da Trilha 2
Próxima trilha:
Trilha 3 — Projetos: projetos end-to-end com cada biblioteca, do prompt ao MP4.