Mapa da trilha
Conteúdo detalhado
⚙️ O stack: Claude Code + Remotion + skills
O que é cada peça, por que Remotion roda na web, e como dois comandos carregam 28 arquivos de regras no contexto do Claude.
Motion graphics tradicional = painéis complexos e keyframes infinitos; a curva de aprendizado mata a ideia antes de animar.
Entender a dor deixa claro o ganho de gerar animação por código com IA.
curva de aprendizado · keyframes manuais · barreira de entrada.
Remotion é React: HTML/CSS/SVG/Canvas viram frames. Por isso ele se combina com bibliotecas de animação da web.
É o que permite plugar GSAP, D3, Three.js e Lottie depois.
React · web stack · composição declarativa.
npx skills add remotion-dev/skills e depois claude. Só isso.
Setup de segundos — a barreira técnica praticamente some.
npx skills add · pasta de skills · claude inicia a sessão.
9 padrões de componente, 7 tipos de transição, primitivos de animação, integração de áudio e melhores práticas de render.
É o conhecimento que o Claude passa a ter sobre Remotion.
component patterns · transitions · rendering best practices.
As regras carregam no contexto do Claude sozinhas — você não cola documentação a cada prompt.
O Claude já "sabe Remotion" desde o primeiro prompt da sessão.
contexto carregado · skills como conhecimento · zero boilerplate.
Remotion renderiza por frame, de forma determinística — ideal para timeline fixa, não para interação.
Explica por que GSAP encaixa tão bem e Framer Motion nem tanto (T2).
determinístico · timeline fixa · frame a frame.
✨ Por que a skill muda tudo
O mesmo prompt, dois resultados completamente diferentes. Sem a skill: genérico e tremido. Com a skill: spring correto, sequenciamento, transições limpas.
Layout genérico, timing estranho, elementos no lugar errado — parece a primeira tentativa de CSS animation de alguém.
É o piso contra o qual você mede o ganho da skill.
timing tosco · posição errada · sem física.
Transições limpas, física de spring correta, sequenciamento adequado — a diferença é imediata.
Mostra que o gargalo não é o modelo, é o contexto que ele recebe.
spring correto · sequenciamento · transições limpas.
Entradas com leve overshoot, como uma mola — o que faz a animação parecer viva em vez de robótica.
É o detalhe que separa "amador" de "produção".
overshoot · damping · naturalidade.
Elementos entram na ordem e no tempo certos, não todos de uma vez.
Ritmo é o que dá ar profissional à peça.
ordem · offsets · respiro entre elementos.
Texto digitando, texto aparecendo — limpo. Muitos elementos e transições chiques de uma vez = bagunça.
Simplicidade no começo é o que mantém a qualidade.
escopo pequeno · menos é mais · clareza.
Sempre comece básico e refine em turnos na mesma conversa.
É o método que se aprofunda no módulo 1.3 e na T4.
esqueleto → refino · iteração · mesma sessão.
💬 Como conversar com o Claude
O método que faz a qualidade compor: começar com um esqueleto e refinar em turnos na mesma sessão, deixando o contexto acumular.
O primeiro prompt cria a estrutura básica, sem perfeição.
Tentar o resultado final num único prompt quase sempre falha.
estrutura mínima · sem one-shot · base para refinar.
No segundo turno você ajusta tempos, offsets e ritmo.
Timing é onde a animação ganha intenção.
duração · delay · stagger.
Ajusta easing, spring e curvas até o movimento ficar natural.
Pequenos ajustes de curva mudam totalmente a sensação.
easing · spring · polish de movimento.
O Claude lembra o que já foi feito; cada turno parte do anterior.
A qualidade compõe — não recomece do zero a cada pedido.
memória de contexto · continuidade · qualidade composta.
Liste as cenas numeradas ("1. headline entra; 2. cards em stagger…") em vez de descrever vagamente.
Sequência explícita gera resultado mais previsível e correto.
lista numerada · cena a cena · clareza de intenção.
Nem tudo anima igual: o elemento principal lidera, o resto apoia.
Hierarquia guia o olhar e evita poluição visual.
foco · suporte · contraste de movimento.