Mapa da trilha
Conteúdo detalhado
🎯 Truques de produção
Dois truques profissionais: motion path via imagem e render com canal alpha correto.
Dois problemas comuns resolvidos com abordagem visual: controle de trajetória e render com transparência.
Desenhe a linha desejada em papel ou num app simples, salve como imagem e entregue ao Claude. Ele extrai o path e gera a animação.
Linguagem é ambígua para formas. "Curva suave para a direita" gera resultados imprevisíveis; uma imagem elimina a ambiguidade.
Title cards, lower thirds e overlays que serão compostos sobre footage existente — sempre que o background do Remotion não for o background final.
Três campos no painel de render do Remotion. Sem essas configurações o canal alpha achata e você perde a transparência.
Alpha achata, imagem confusa para o path, codec errado — os três erros mais frequentes ao produzir com transparência.
🔁 Iteração que compõe qualidade
Os melhores outputs do Remotion não saem do primeiro prompt — são esqueletos refinados 3-4 vezes na mesma conversa.
Peça só a estrutura — elementos no lugar certo, sem timing refinado. Valide a composição antes de qualquer refinamento.
Com estrutura aprovada, adicione durações, easing e sequência de entrada/saída. Ainda na mesma sessão — o Claude lembra o contexto.
Com timing aprovado, foque em sutilezas: overshoot, spring, stagger entre elementos. Movimento expressivo nasce aqui.
Cores, tipografia, gradiente, sombra. O polish é o que transforma "funciona" em "impressiona". Só faz sentido quando o movimento já está certo.
Um único prompt longo raramente supera 4 prompts incrementais. Comece sempre do mínimo viável e construa sobre o aprovado.
O Claude lembra todo o código da sessão. A cada turn ele parte do aprovado — não recomeça. A qualidade é cumulativa, não substituída.
🗺️ Recap & mapa final
Tudo recapitulado: a matriz das libs, as 4 regras universais e por que isso é produção agora.
GSAP = coreografia fixa; D3 = dados animados; Three.js = 3D; Lottie = leve/rápido. Cada uma com seu domínio claro.
GSAP para vídeo e coreografia determinística; Framer Motion para UI reativa e física. Não são concorrentes — são domínios diferentes.
Vanilla Three.js para cenas 3D simples; React Three Fiber (R3F) quando a cena precisa de composição com outros componentes React.
Instale a skill, comece simples, itere na mesma sessão, renderize com as configurações certas. Vale para qualquer lib, qualquer projeto.
Claude Code + Remotion não é protótipo — é ferramenta de produção real. E cada combo custa centavos. A qualidade escala com a sua abordagem.
Pratique os 4 projetos da Trilha 3, explore a documentação oficial de cada lib e construa o seu primeiro vídeo de produção.