A matriz das 4 bibliotecas
Cada biblioteca tem um domínio claro. Não há "melhor lib" — há a lib certa para cada tipo de motion. A matriz abaixo é o mapa de decisão principal do curso.
Cada lib aparece em stagger — como num vídeo de produto gerado com o próprio curso.
| Lib | Melhor para | Casos de uso | Evitar quando |
|---|---|---|---|
| GSAP | Coreografia determinística | SaaS intros, launch videos | UI reativa / física |
| Framer Motion | UI física e reativa | Interfaces, spring | Coreografia de vídeo |
| D3 | Dados animados | Charts, dashboards, mapas | 3D, motion puro |
| Three.js / R3F | Cenas 3D | Produto, brand, arquitetura | Motion 2D simples |
| Lottie | Leve e rápido | Social clips, micro-conteúdo | Coreografia complexa |
GSAP × Framer relembrado
A distinção mais importante do curso, relembrada: GSAP para vídeo (timeline determinística, coreografia fixa, o que acontece no frame X está definido); Framer Motion para UI (spring, física, reativo ao estado da aplicação). Não são concorrentes — são domínios diferentes.
⚡ Use GSAP quando:
- →Está produzindo um vídeo renderizado
- →A coreografia é fixa e definida por você
- →Precisa de sincronização precisa com áudio
- →SaaS intro, launch video, apresentação
🌊 Use Framer quando:
- →Está animando uma interface de usuário
- →A animação reage ao estado (hover, click)
- →Quer spring e física natural
- →Componentes React interativos
Vanilla Three.js × R3F relembrado
Mesma lógica da distinção anterior: Vanilla Three.js para cenas 3D simples, sem dependência de React. React Three Fiber (R3F) quando a cena 3D precisa ser composta com outros elementos React — estado, UI, animações Framer no mesmo componente.
Vanilla Three.js — quando usar
Cena 3D isolada, sem composição com UI React. Prompt do Claude: "crie cena Three.js com [descrição] — sem React". Resultado: menos boilerplate, código mais direto.
React Three Fiber — quando usar
Quando o componente 3D precisa de props, estado React, ou estar dentro de uma composição maior. O overhead de R3F compensa quando há integração com o resto do app.
💡 Regra de bolso
Se a sua cena 3D vai viver dentro de um componente React e precisa se comunicar com ele — R3F. Se é uma cena independente num canvas separado — Vanilla. Quando em dúvida, comece com Vanilla e migre para R3F se precisar da integração.
As 4 regras universais
Independente da biblioteca, do tipo de vídeo ou do nível de complexidade — estas 4 regras sempre se aplicam. São o denominador comum de todos os projetos do curso.
Instale a skill
Sem a skill Remotion, o Claude produz motion genérico. Com a skill, ele conhece as convenções e APIs específicas. É a diferença entre resultado médio e resultado certo na primeira tentativa.
Comece simples
O esqueleto primeiro. Composição antes de timing. Timing antes de movimento expressivo. Movimento antes do polish. A ordem importa — e cada etapa precisa ser aprovada antes de avançar.
Itere na mesma sessão
O contexto acumulado na sessão é o ativo mais valioso. Não abra nova sessão no meio do fluxo — você perde todo o código e histórico que o Claude já tem na memória.
Renderize com as configurações certas
ProRes 4444 XQ + PNG + última opção para alpha. H.264 para distribuição. Conheça o destino do vídeo antes de renderizar — as configurações dependem de onde o vídeo vai parar.
É produção agora / praticamente grátis
Claude Code + Remotion não é protótipo, não é experimento — é ferramenta de produção real, hoje. E cada vídeo produzido com esta stack custa uma fração de centavo em tokens. O custo de experimentação é praticamente zero.
🚀 Por que é produção agora
- ✓Claude Code com skill Remotion gera código funcional na primeira tentativa
- ✓Remotion renderiza com qualidade de broadcast (4K, ProRes)
- ✓O fluxo esqueleto → polish está validado em centenas de vídeos
- ✓A qualidade escala com a sua abordagem — não com o orçamento
💰 Praticamente grátis
- ✓Uma sessão de 4 turns custa centavos em tokens
- ✓Remotion é open source — sem custo de licença
- ✓Node.js roda localmente — sem custo de renderização
- ✓Você pode iterar 50 vezes por menos que um café
Próximos passos
Você terminou o curso. O que fazer agora para transformar o aprendido em fluência real? Três ações concretas com retorno imediato.
Árvore de decisão completa — nunca erre a lib novamente.
Pratique os 4 projetos da Trilha 3
SaaS intro (GSAP), data viz (D3), cena 3D (Three.js/R3F) e social clip (Lottie). Cada um aplica o fluxo de 4 turns numa situação real. A fluência vem da prática, não da leitura.
Explore a documentação oficial de cada lib
GSAP docs, D3 gallery, Three.js journey, React Three Fiber docs. O Claude já sabe usar — mas você precisa saber o que pedir. Conhecer o catálogo da lib é saber o que é possível.
Construa o seu primeiro vídeo de produção
Não para aprender — para entregar. Um vídeo real, com destino real (YouTube, reel, apresentação). O primeiro vídeo de produção é o que transforma o curso de aprendizado em habilidade.
🎓 Curso concluído
Você passou por todas as quatro trilhas. Eis o que agora sabe fazer:
Claude Code + Remotion é ferramenta de produção agora. A qualidade escala com a sua abordagem. E cada combo é praticamente grátis.