Cada frame é um componente React desenhado pelo Remotion. A fila de frames, em sequência, é o vídeo.
😩 O problema do After Effects
Fazer motion graphics sempre foi doloroso: abrir o After Effects, encarar painéis complicados e keyframes sem fim. A curva de aprendizado é tão íngreme que mata a ideia antes mesmo de você animar.
✗ O jeito antigo
- ✗Painéis complexos e timeline de keyframes manual.
- ✗Curva de aprendizado que desanima antes do primeiro resultado.
- ✗Difícil versionar, reusar ou automatizar.
✓ O jeito com código
- ✓Você descreve em linguagem natural; o Claude escreve o código.
- ✓Versionável no git, reutilizável, parametrizável.
- ✓Iterar é só continuar a conversa.
🕸️ Remotion roda na web stack
O segredo que destrava tudo: Remotion é React. Seus frames são componentes — HTML, CSS, SVG, Canvas. Porque vive na stack web, ele se combina naturalmente com as bibliotecas de animação que já existem ali.
🧩 Por isso o curso existe
Se Remotion é web, então tudo que anima na web pode entrar nele:
- •GSAP para coreografia de timeline.
- •D3 para dados que viram história.
- •Three.js para cenas 3D renderizadas como frames.
- •Lottie para micro-animações reutilizáveis.
⌨️ Os dois comandos
O install inteiro são duas linhas no terminal. Uma adiciona a skill; a outra abre o Claude já com tudo carregado.
💡 Dica
npx não exige instalação global — roda o comando na hora. Depois do claude, você já pode pedir uma composição Remotion no primeiro prompt.
📦 28 rule files
Aquele comando instala 28 arquivos de regras: padrões de componente, transições, primitivos de animação, integração de áudio e práticas de render. É o "manual do Remotion" que o Claude passa a ter na cabeça.
🧠 Tudo no contexto, automático
Essas regras carregam sozinhas no contexto do Claude. Você não cola documentação a cada prompt — desde a primeira mensagem, o Claude já "sabe Remotion".
Você instala uma vez
A skill fica disponível para a sessão do Claude naquele projeto.
O contexto carrega sozinho
Padrões, transições e práticas entram sem você pedir.
Você só descreve a animação
Zero boilerplate. O foco volta para a ideia, não para a configuração.
🎬 O modelo frame-based
Remotion renderiza frame a frame, de forma determinística: o frame N sempre gera a mesma imagem. Isso é perfeito para uma timeline fixa de vídeo — e explica por que algumas bibliotecas encaixam melhor que outras (você vê isso na Trilha 2).
🔮 O que isso prevê
Como a timeline é fixa e determinística, bibliotecas de coreografia (GSAP) encaixam perfeitamente, enquanto bibliotecas reativas a interação (Framer Motion) fazem menos sentido em vídeo renderizado. Guarde essa ideia para o módulo 2.2.
📌 Resumo do módulo
Próximo módulo:
1.2 — Por que a skill muda tudo: o mesmo prompt, com e sem skill.