Motion design com o Claude: o guia completo para criar vídeos animados com código

Desde que o Claude Opus 5.5 chegou, as redes se encheram de vídeos animados “feitos com um prompt”: vinhetas, lançamentos de produto, videoclipes, laços em 3D. Este guia explica, em português e sem mistério, como esses vídeos são feitos de verdade, o que separa um resultado amador de um profissional e como montar o mesmo processo no seu computador, sem After Effects.

O ponto de partida é o excelente playbook “Opus 5.5 Motion Design: The Complete Playbook”, de clayo (@0xclayo). Aqui reunimos as ideias centrais dele com o que aprendemos na prática na Y2 Studio, onde usamos esse método todas as semanas para vinhetas, clipes de música e vídeos para Instagram.

O Claude não faz vídeo: ele escreve o vídeo

O Claude recebe texto e imagens e devolve texto. Ele não gera um arquivo MP4. O que ele faz é escrever um programa que desenha cada quadro da animação. Depois, um navegador abre esse programa, “fotografa” um quadro de cada vez, e o ffmpeg (um programa gratuito de vídeo) junta essas fotos num arquivo de vídeo.

Parece uma limitação, mas é o contrário. Como nada depende de relógio, o quadro 512 sai idêntico toda vez. Mudar um detalhe é trocar um número e renderizar de novo só aquele trecho. O Claude consegue olhar os próprios quadros e corrigir o que está errado. E o código fica com você: o segundo vídeo de um projeto sai sempre mais rápido que o primeiro.

Por isso a qualidade do resultado depende de duas coisas: as decisões que você entrega ao Claude e o ciclo de revisão que você deixa ele fazer. Tudo o que você não decide, ele decide com um padrão, e são esses padrões que formam o “visual de IA” que todo mundo já aprendeu a reconhecer.

As 12 regras em uma tabela

A escada do prompt: de uma linha a um roteiro de direção

A regra é simples: quanto mais curto o pedido, mais o vídeo reflete o gosto do Claude e menos o seu. O playbook organiza isso em quatro degraus.

Degrau 1 · A frase única

Foi o pedido mais copiado na semana do lançamento: um “showreel” de 15 segundos em que o próprio Claude é o designer. Funciona porque o gênero já tem regras conhecidas e não há produto para errar. Mas serve só para testar a ferramenta: milhares de pessoas usaram a mesma frase, e os vídeos começaram a se parecer. Se for usar, dê pelo menos uma espinha dorsal:

Degrau 2 · O vídeo da sua marca

Três linhas transformam a demonstração no seu vídeo: o endereço do seu site, os seus materiais reais (logo, capturas de tela, fotos das obras) e a música. A linha mais importante é a dos materiais. Para um artista, isso significa as fotos das obras, e não uma “obra parecida” desenhada pela IA.

Degrau 3 · A lista de estados

É o formato que produz os vídeos de interface mais elogiados: uma forma única que nunca corta e vai virando botão, carregador, player e gráfico, sempre movida por um cursor. Cada estado tem início, fim e duração conhecidos. O Claude executa o seu filme em vez de adivinhá-lo.

Na Y2 usamos exatamente isso, numa tabela “batida por batida”: em cada batida da música, o que acontece, quem causa (um clique, um arrasto, um corte da música) e qual som entra. Essa tabela é aprovada antes de qualquer código, porque mexer no plano custa segundos e mexer na cena pronta custa a tarde.

Degrau 4 · O roteiro de direção

Os videoclipes que viralizaram “com um prompt” tinham, na verdade, pedidos de 9 a 19 mil caracteres: vídeo de referência, música, ferramentas, fluxo com etapas de aprovação e ciclo de revisão. Não é um prompt, é contratar uma equipe. O modelo desse roteiro está mais abaixo.

O “visual de IA” e como evitá-lo

Peça “uma animação 3D premium dos meus fones” sem mais nada e você quase sempre recebe: fundo azul-marinho espacial, anel brilhante, partículas e o produto girando. É o padrão do modelo, quase item por item. O antídoto é dar nome a cada padrão:

• Título centralizado sobre degradê
• Tudo entrando ao mesmo tempo, ou tudo subindo e aparecendo do mesmo jeito
• Gradientes roxos e azuis, brilho, “bloom”, reflexos de lente
• Partículas flutuando só para enfeitar
• Rótulos e molduras nos cantos
• Produto 3D girando num pedestal
• Movimentos lineares
• Logo batendo na tela com um clarão branco no final

Depois de cada primeira renderização, veja o que ele usou mesmo assim e acrescente à lista. A lista cresce, e os padrões somem. Na Y2 essa lista fica gravada nas instruções permanentes do projeto, então vale para todo vídeo novo sem precisar repetir.

O tradutor de adjetivos

Todo adjetivo é um cheque em branco. Um número é um cheque assinado.

Montando o estúdio: app ou Claude Code

Porta 1 · O aplicativo do Claude

Escolha o Opus 5.5, cole o pedido e veja a animação rodando na pré-visualização. Peça um contador de quadros num canto e a barra de espaço para pausar: assim suas correções podem citar o quadro exato. Para um primeiro teste, gravar a tela basta, mas a gravação não é exata e pode pular quadros.

Porta 2 · O Claude Code, o estúdio completo

Com acesso ao terminal, o Claude renderiza, abre os quadros, vê o que está errado, corrige e renderiza de novo, sem você copiar nada. Instale pelo instalador indicado na documentação oficial da Anthropic e deixe na pasta do projeto um arquivo de instruções permanentes (o CLAUDE.md, ou uma skill) com as regras da casa: qualidade de quadros, a lista de proibidos, o formato padrão.

O motor: cada quadro é uma função do tempo

O bloco mais importante de todo o método é o “contrato de renderização”: a página expõe seek(t), e tudo o que aparece na tela é calculado a partir de t. Três consequências práticas:

• Molas sem simulação: a posição da mola é calculada direto para qualquer instante, então o quadro 300 sai sem calcular os 299 anteriores.
• Sorteio com semente fixa: o “aleatório” é recalculado igual em todo quadro, e a entrada em cascata sai sempre idêntica.
• Quadros fora de ordem: dá para renderizar só o trecho alterado, ou vários quadros por quadro final (subquadros) para um desfoque de movimento real.

Na prática, você quase não digita comandos. Basta dizer ao Claude Code algo como:

Na Y2, o nosso renderizador também gera uma folha de contato por batida: um quadro em cada batida da música, todos lado a lado numa única imagem. Ela leva segundos e pega quase tudo o que só apareceria depois de minutos de render.

Os números do movimento

Curvas de aceleração

Quatro regras cobrem quase tudo: entrar desacelerando; sair acelerando, em mais ou menos metade do tempo da entrada; atravessar a tela acelerando e desacelerando; movimento linear só para rotação, barra de progresso e a fase de um laço.

Molas

Molas têm massa: aceleram, passam um pouco do alvo e assentam. Por isso parecem caras. Um único número traduz todas as bibliotecas, o amortecimento relativo: 1,0 nunca passa do alvo; 0,7 a 0,85 é “premium”; 0,4 a 0,6 é brincalhão; abaixo de 0,3 é desenho animado. Deixe posição e escala balançarem, mas nunca opacidade ou cor: um esmaecimento que passa do ponto vira um piscar. Quando um mesmo valor muda de alvo várias vezes (um cursor, a largura de uma caixa), some uma mola por mudança em vez de reiniciar.

Durações em quadros

A grade da batida

Quadros por batida = qps × 60 ÷ BPM. A 120 BPM a conta fecha em quadros inteiros em qualquer taxa comum, por isso é o andamento mais amigável. Em outros andamentos, calcule cada batida a partir do número dela (quadro = arredondar(i × 60 ÷ BPM × qps)) e nunca vá somando um valor arredondado: a 128 BPM e 30 qps, somar 14 quadros por batida põe a batida 32 dois quadros fora da música, e o público sente. Troque de cena no compasso, faça os efeitos na batida e não mude tudo em toda batida, porque cansa.

O ciclo de crítica: o Claude assistindo aos próprios quadros

O Claude lê imagens, mas não assiste a vídeos. O truque é transformar o vídeo em imagens que ele lê: a folha de contato, os quadros problemáticos, o antes e depois lado a lado. O ciclo é: renderizar, olhar, anotar com número de quadro, corrigir, renderizar de novo. Este é o hábito que separa as peças que viralizam das que são postadas com um “ficou meio sem graça”.

Combine antes o que é um 8 de 10, para os dois julgarem pela mesma régua: tempo a até 1 quadro da batida, no máximo dois elementos se mexendo ao mesmo tempo, toda mola com ultrapassagem visível e assentamento, nenhum padrão proibido na tela. Peça uma ou duas correções por rodada; pedir tudo de uma vez transforma ajuste em reescrita. Os números típicos de quem conta a verdade: primeira renderização 4, segunda 6,5, terceira 8, quarta 9. Iterar não é falha do método. É o método.

Som: o Claude não ouve, ele mede

Tudo o que o Claude faz com áudio são números: tempos, frequências, volume. Isso acaba sendo uma vantagem, porque ele nunca “acha” que está sincronizado. Ele mede. Duas regras vêm antes de qualquer código:

• A imagem precisa funcionar em silêncio. Instagram e X começam o vídeo mudo.
• O som cai no quadro da imagem ou um quadro depois, nunca antes. Na vida real a luz chega antes do som; um som levemente atrasado parece natural, um adiantado parece errado na hora.

Caminho A · Você traz a música

Um pequeno script analisa a faixa e devolve o andamento, a grade de batidas e os tempos fortes. O Claude põe as trocas de cena nos tempos fortes, as mudanças de estado nas batidas e cada impacto no pico mais próximo. Na Y2, os efeitos sonoros são alinhados pelo pico do som (o momento do impacto), e não pelo início do arquivo, que costuma ter silêncio antes.

Caminho B · Sem música: som sintetizado em código

Sem arquivos, sem downloads e sem licença: cada efeito é uma pequena fórmula, e a mesma lista de eventos gera o mesmo som toda vez. Dá até para pedir uma trilha original de 120 BPM feita em código.

Laços perfeitos e exportação

Um laço não tem emenda quando o último quadro leva ao primeiro tão suavemente quanto quaisquer outros dois. Cinco regras resolvem:

• Renderize do quadro 0 ao N−1, nunca o N (ele é o 0 de novo).
• Tudo o que se repete sai de uma única fase, de 0 a 1 ao longo do laço.
• Use ciclos inteiros: uma forma que gira exatamente 90° por laço cai sobre si mesma.
• Ruído orgânico em laço: percorra um círculo dentro do ruído, para terminar onde começou.
• O quadro 0 deve ser uma composição pronta: é o que aparece enquanto o vídeo carrega.

Para conferir, rode o laço três vezes seguidas e olhe as emendas. E confira se a renderização é determinística: renderize duas vezes e compare os quadros. Se algo mudar, há um relógio ou um sorteio sem semente escondido no código. Defina o formato (vertical, quadrado, horizontal) no começo: trocar depois significa refazer a direção de todas as cenas.

Qual motor escolher

Escreva o motor na primeira linha, com os números: “uma composição Remotion, 1920×1080, 30 qps, 450 quadros” não deixa nada para adivinhar. Na Y2 usamos HTML puro para vinhetas, títulos e camadas transparentes por cima de vídeos reais, e Remotion com Three.js para os carrosséis 3D da marca.

O roteiro de direção para peças longas

As produções que rodaram a noite inteira não vieram de sorte: vieram de roteiros que contratam uma equipe em vez de descrever um vídeo. O esqueleto é sempre o mesmo:

# Roteiro de direção
## Referência     (link ou descrição; só a gramática: ritmo, paleta, tipografia, transições)
## Música         (título, BPM, licença)
## Formato        (1080×1920, 30 qps, duração)
## Ferramentas    (renderizador, análise de batidas, mixagem)
## Fluxo          (1. plano na grade · 2. cenas · 3. ciclo de crítica · 4. som · 5. exportação)
## Portões        (cada etapa só avança com nota 8 de 10 e, nas aprovações, com o meu OK)
## Proibidos      (a sua lista)

Uma jogada do playbook vale destacar: gerar e depois redesenhar. Um modelo de vídeo por IA cria cenas-base com personagens e física real, e o Claude redesenha tudo em código por cima. O modelo de vídeo dá o movimento difícil de programar; a camada em código dá um visual consistente e seu.

Você não precisa digitar milhares de caracteres: fale os tópicos em voz alta, cole a transcrição, e o Claude organiza. São os títulos do roteiro que transformam cinco minutos de conversa numa produção inteira.

Perguntas frequentes

Baseado no playbook “Opus 5.5 Motion Design: The Complete Playbook”, de clayo (@0xclayo, 16/10/2026), e na prática da Y2 Studio com motion design em código. Os nomes de menus e as versões dos aplicativos podem mudar.