Mesmo prompt. A skill injeta física de spring; sem ela o Claude usa linear por padrão.
😩 Sem skill: genérico e tremido
Quando você pede uma animação ao Claude sem nenhum contexto de Remotion, ele inventa. O código compila, mas o resultado parece uma primeira tentativa de CSS animation — timing linear, elementos em posições erradas, sem nenhuma noção de frame rate ou sequência.
✗ Saída sem skill
- ✗Usa
setTimeoutou CSS puro — não háuseCurrentFrame. - ✗Timing linear: tudo entra ao mesmo tempo com a mesma velocidade.
- ✗Elementos posicionados com
absolutee valores mágicos que nunca ficam certos. - ✗Nenhuma noção de FPS ou duração em frames — às vezes nem renderiza.
✓ O que deveria ser
- ✓Cada prop muda em função de
frame— determinístico e previsível. - ✓Spring physics com
spring()da API do Remotion. - ✓Sequenciamento via
delay+frompor elemento.
✅ Com skill: limpo, spring correto, sequências precisas
Com a skill ativa, o Claude já sabe que toda animação é uma função de frame, que spring() é o helper correto para transições naturais, e que a duração se define em frames (não em segundos de CSS). A diferença não está no seu prompt — está no contexto que a skill injeta.
Por que spring e não easing?
Easing descreve como ir de A a B em tempo fixo. Spring descreve física: massa, rigidez e amortecimento — o resultado é orgânico e interrompível. Remotion expõe spring() que calcula isso frame a frame.
✓ Anatomia de uma boa animação
- ✓Spring suave —
damping: 14para overshoot leve, natural. - ✓Delay por elemento — cada peça entra no momento certo, não todas juntas.
- ✓Transições compostas — opacity + scale + translateY juntos, não separados.
📐 Parâmetros do spring()
🌊 Física de spring: overshoot e damping natural
O segredo do movimento orgânico é o overshoot — o elemento vai um pouquinho além do destino antes de se assentar. Não é um erro: é o que faz movimento parecer físico. O damping controla o quanto de bounce existe.
A curva de spring ultrapassa levemente o valor-alvo (overshoot) e se assenta — isso é o que cria naturalidade.
Regra prática do damping
damping 8–12 → bounce vivo (bom para ícones, badges). damping 14–18 → settle suave (bom para cards, texto). damping 25+ → sem overshoot (bom para layouts críticos).
⏱️ Sequenciamento: ordem no tempo, não tudo junto
Quando tudo anima junto, o olho não sabe para onde olhar. O stagger é a técnica de atrasar cada elemento um pouco — a atenção flui naturalmente de cima para baixo, da esquerda para a direita, do principal para o secundário.
Cada barra entra com 0.3 s de atraso — a leitura flui de cima para baixo.
Identifique a hierarquia visual
O que entra primeiro deve ser o mais importante — título, hero, CTA.
Aplique delay por índice
Cada elemento recebe frame - i * offset — simples e escalável.
Guarde o offset como constante
8 frames (a 30fps ≈ 266ms) é um bom ponto de partida. Ajuste na conversa.
🥇 Regra de ouro: comece simples
Texto que aparece digitando ou fazendo fade é limpo e eficaz. Vinte elementos animando juntos é bagunça. A regra de ouro: menos elementos animados = mais impacto por elemento. A skill te ajuda a resistir a tentação de animar tudo.
✗ Armadilhas comuns
- ✗Animar cada palavra individualmente — cria ansiedade visual.
- ✗Usar rotação + escala + translação ao mesmo tempo sem propósito.
- ✗Background particle effects que competem com o conteúdo.
- ✗Animações que nunca param — distrai da mensagem central.
✓ Princípios que funcionam
- ✓Um elemento principal anima; o resto entra suave com fade.
- ✓Texto com typewriter ou fade-up é sempre legível e elegante.
- ✓Use o movimento para guiar o olhar, não para impressionar.
Teste do músico
Um músico experiente sabe que o silêncio é tão importante quanto as notas. Um motion designer experiente sabe que o que não anima é tão importante quanto o que anima. Pergunte: "Esta animação serve à mensagem, ou é decoração?"
🔁 Itere a partir daí
A skill não é um botão mágico — é um acelerador de iteração. Você começa com algo que funciona (não perfeito), valida no preview, pede ajuste na mesma conversa, e chega num resultado profissional em poucos turnos.
Gere o esqueleto com spring padrão
Primeiro resultado: funciona, não é perfeito. Isso é intencional — base para iteração.
Ajuste damping e stiffness em conversa
"Está muito elástico, reduz o bounce" — o Claude ajusta os parâmetros sem reescrever tudo.
Refine o sequenciamento
"O texto entra cedo demais, delay de 12 frames" — a conversa acumula contexto, edita cirurgicamente.
Renderize e avalie no player
O Remotion studio toca em tempo real — você vê o resultado enquanto conversa, não depois de renderizar.