Cada turno adiciona uma camada. O turn 1 nunca precisa ser perfeito — precisa funcionar.
🦴 Esqueleto primeiro (turn 1, sem perfeição)
O objetivo do turn 1 é simples: fazer o componente renderizar. Nada de timing preciso, nada de spring, nada de cores perfeitas. Você só quer ver algo na tela para confirmar que a estrutura faz sentido.
Por que pedir sem animação primeiro?
Separar estrutura de movimento permite identificar problemas de layout antes de qualquer timing. Se o card tem o tamanho errado, você prefere descobrir no turn 1 do que depois de ajustar spring por meia hora.
✗ Erro comum no turn 1
- ✗Pedir layout + animação + cores + responsividade tudo de vez.
- ✗Descrever a animação final antes de ter a estrutura validada.
- ✗Exigir perfeição na primeira resposta e desistir se não vier.
✓ Turn 1 bem feito
- ✓Componente renderiza sem erros no studio.
- ✓Estrutura de elementos faz sentido visualmente.
- ✓Você consegue descrever o que quer mudar no turn 2.
⏱️ Adicione timing (turn 2)
Com a estrutura validada, o turn 2 define a duração e o ritmo. Quando cada elemento entra, quanto tempo fica visível, quando sai. Ainda sem spring — use interpolate() ou fade simples.
Defina FPS e duração total
30fps é o padrão seguro. Duração em frames: 3s = 90 frames, 5s = 150 frames. Deixe explícito.
Use intervalos de frame, não segundos
O Remotion opera em frames. "Aparece em 0.5s" vira "frame 15 a 30fps". Pensar em frames dá controle fino.
interpolate() é seu amigo aqui
interpolate(frame, [0,20], [0,1]) é um mapeamento linear simples e previsível — perfeito para validar timing antes de adicionar spring.
🎨 Refine o movimento (turn 3, easing e spring)
Com timing validado, o turn 3 substitui o interpolate linear por spring physics. Agora você tem base para pedir parâmetros específicos — porque já sabe que a estrutura e o ritmo estão certos.
Cada turno eleva a qualidade de forma incremental — nenhuma reescrita, só refinamento.
Quando adicionar spring vs. manter interpolate?
Use spring() para elementos que entram em cena ou mudam de estado. Use interpolate() para valores que precisam de controle linear exato — como progresso de uma barra ou fade de saída.
🧠 Contexto acumula — mesma sessão, qualidade compõe
O Claude não esquece. Cada turno na mesma sessão acumula contexto: ele sabe o nome dos componentes, os parâmetros já definidos, o que você aprovou e o que pediu para mudar. Nunca recomece uma sessão no meio de uma animação.
Mesma sessão. O card v4 foi construído sobre o v1 — sem reescrever, sem perder contexto.
✗ Quebra de contexto
- ✗Abrir nova janela no meio do fluxo — contexto zerado.
- ✗Copiar o código para um novo chat para "fazer mais rápido".
- ✗Repetir informações que o Claude já sabe — desperdiça tokens.
✓ Boas práticas de sessão
- ✓Mantém a mesma sessão do início ao fim do componente.
- ✓Referencia elementos pelo nome que você deu: "o HeroCard", "o título animado".
- ✓Ao retomar uma sessão antiga, recapitule o estado em 2 linhas.
📋 Descreva a sequência em lista numerada
Para animações com mais de um elemento ou cena, escreva a sequência como lista numerada de eventos. Isso elimina ambiguidade e o Claude consegue mapear cada item para um intervalo de frames.
Sobreposição intencional de frames
Note que o logo começa no frame 15 enquanto o background ainda está entrando (até frame 20). Essa sobreposição de 5 frames cria fluidez — tudo entrando ao mesmo tempo seria rígido, tudo sequencial seria lento.
Numeração define prioridade visual
O item 1 da lista é o mais importante — fundo, container, hero. Itens posteriores são suporte.
Especifique o intervalo de frames
Dizer "depois do logo" é ambíguo. Dizer "frame 35–55" é determinístico e editável no próximo turno.
Mencione o tipo de movimento por item
"spring", "slide-up", "fade", "bounce" — o Claude usa esses termos para escolher a API correta.
🎯 Hierarquia de movimento — principal lidera, resto apoia
Toda cena tem um elemento principal que carrega a mensagem — ele anima com a maior intensidade (spring, scale, slide). Os outros elementos são suporte: entram suave, ficam quietos, saem primeiro. Inverta isso e a cena vira caos.
✗ Sem hierarquia
- ✗Background anima com spring tão forte quanto o título.
- ✗Ícones de suporte fazem bounce chamando mais atenção que o texto.
- ✗Tudo sai ao mesmo tempo — o espectador não sabe onde olhar.
✓ Com hierarquia clara
- ✓Background: fade simples, entra primeiro, sem overshoot.
- ✓Título principal: spring com overshoot — é o herói da cena.
- ✓Elementos de apoio: slide suave com damping alto, entram depois.
Como descrever hierarquia para o Claude
Basta nomear o papel: "O título é o elemento principal — spring com overshoot. Os ícones são suporte — fade simples, entram 10 frames depois." O Claude usa isso para calibrar damping, delay e tipo de animação por elemento.
📋 Resumo do módulo
Você concluiu a Trilha 1 — Fundamentos. Está pronto para avançar às bibliotecas.
🎉 Trilha 1 concluída!
Você domina o modelo mental: stack, skill, física de spring e diálogo iterativo. Na Trilha 2, você aprende as bibliotecas de animação que desbloqueiam efeitos avançados — GSAP, Framer Motion e Lottie dentro do Remotion.