Como fazer uma animação em que cada quadro é desenhado em JavaScript (do jeito do Claude Opus 5.5)

Na semana em que o Claude Opus 5.5 saiu, um tipo de vídeo não parava de circular: curtas animados com uma legenda parecida com a do Kevin Ngo, "Claude Opus 5.5 drew every frame of this animation in JavaScript" ("o Claude Opus 5.5 desenhou cada quadro desta animação em JavaScript"). Nada de arquivos de imagem, banco de vídeos ou modelo de vídeo. Existe um programa que desenha cada quadro num canvas, e a música é sintetizada pela mesma página. Este guia explica como esses filmes são feitos e mostra dois caminhos para fazer o seu: no Claude Code com uma skill de código aberto, ou no modo Animation do iArt, sem abrir terminal nenhum. Todos os filmes abaixo saíram exatamente do prompt mostrado.

"What actually happens in the 2 seconds after you tap your card at a checkout? 25-30s explainer for our fintech blog." Esse foi o prompt inteiro (os prompts aparecem aqui no inglês original, mas o app aceita prompts em qualquer idioma). Cada forma, cada rótulo e o relógio de "tempo real desde a aproximação" são desenhados por código. Ative o som para ouvir a trilha, que também é sintetizada em código. O único defeito que encontrei, quadro a quadro, é um estilhaço vermelho perdido na borda de cima durante um movimento de câmera, por volta dos 10 segundos.

O que "cada quadro desenhado em JavaScript" quer dizer na prática

Uma animação em JavaScript desse tipo é uma única função, draw(ctx, t), que pinta a imagem inteira do instante t num canvas HTML. Ela não guarda estado entre um quadro e outro e não carrega imagem nenhuma. Como cada quadro depende só do tempo, um navegador headless consegue pular para o quadro 1, 2, 3… e capturar cada um num MP4, com precisão de quadro, por mais lento que seja desenhar cada um.

Três detalhes fazem esses filmes parecerem feitos à mão, e não um descanso de tela:

• Aleatoriedade com semente. As linhas tremem e os preenchimentos parecem feitos a nanquim porque o código de desenho usa um gerador aleatório com semente fixa em vez de Math.random(). O tremor é o mesmo a cada renderização, então os quadros não piscam.
• Música em código. A trilha é escrita com a Web Audio API na mesma página: bateria, baixo, pads e um som sintetizado para cada ação. Ela é renderizada offline e mixada no vídeo, então nenhum arquivo de áudio é necessário.
• Uma linha do tempo só para imagem e som. Os filmes que parecem "no tempo da batida" colocam o andamento, a lista de planos e uma lista de eventos (uma porta bate, um número aparece) numa única estrutura de dados, lida tanto pelo código de desenho quanto pelo código da música. O som cai em cima da ação porque os dois compartilham os mesmos dados de tempo.

Isso a diferencia das duas coisas com que costuma ser confundida:

Passo 1: comece pelo assunto, não pelo estilo

Os filmes que viralizaram são muito diferentes entre si, e a graça está justamente aí. Quando testamos isso em catorze filmes sobre seis assuntos, o tema e as palavras do prompt definiram o visual mais do que qualquer outra coisa. Presets de estilo e imagens de exemplo puxavam tudo para um visual só. O modelo também tem um gosto próprio: fundo azul-escuro com detalhes em âmbar continuou aparecendo mesmo depois de tirarmos qualquer pista disso das instruções.

Então diga do que o filme trata, para quem é e onde vai ser exibido. Se quiser um visual específico, descreva em palavras simples ("no estilo de um livro didático de ciências dos anos 1950") em vez de anexar um mood board. Se não fizer questão, não diga nada e espere o azul com âmbar.

Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.

Teste este prompt no iArt →

Entra uma frase, sai uma página de livro didático: figuras numeradas, legendas, cabeçalho corrido e um céu hachurado a lápis. A física está correta (ondas azuis, mais curtas, se espalham cerca de seis vezes mais que as vermelhas, mais longas). As legendas vão sendo digitadas letra por letra, então um quadro pausado muitas vezes mostra meia frase.

Passo 2: diga a tarefa, a duração e o formato

Os prompts que funcionaram melhor nos nossos testes eram curtos e específicos sobre a tarefa: a pergunta que o filme responde, o público, a duração e o formato. Você não precisa escrever a lista de planos; planejá-la é o primeiro passo do agente (Passo 3). Vale incluir:

• A pergunta ou a história: "como os fones com cancelamento de ruído realmente cancelam o ruído?"
• Duração e plataforma: "explicativo curto na vertical para o TikTok, ~20s". A plataforma também indica a proporção da tela.
• Para quem é: "para uma criança de 2 anos" e "para o blog da nossa fintech" resultam em ritmo e desenho bem diferentes.
• Palavras exatas, se alguma precisar aparecer: o nome de um canal, um slogan. O texto é digitado, então sai escrito do jeito que você escreveu.

How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.

Teste este prompt no iArt →

9:16, 22 segundos, três etapas e uma ressalva ("best on steady hums like engines & fans", ou seja, funciona melhor com zumbidos constantes, como motores e ventiladores), e no fim "Hear it. Flip it. Play it. Quiet." A aproximação da câmera para dentro da concha do fone, por volta dos 7–10 segundos, deixa o quadro apertado: a haste ocupa metade da tela por um instante.

Passo 3: planeje a grade de batidas e os planos antes de qualquer código de desenho

É este passo que separa um filme de um loop de formas se mexendo. Antes de escrever o código de desenho, o agente escreve o plano como dados:

1. Uma grade de batidas: um andamento e seções (introdução, crescendo, clímax, uma pausa curta em silêncio, final). Os cortes caem nos tempos fortes.
2. Uma lista de planos com marcação de cena: normalmente 10–20 planos, cada um com a posição da câmera, dentro de um único mundo contínuo. O filme da semente que vira árvore, logo abaixo, é um só mundo de terra e céu por onde a câmera se desloca, e não uma sequência de slides.
3. Uma lista única de eventos, lida tanto pelo código de desenho quanto pela música.

No exemplo de código aberto "I only asked you to fix one line" ("só pedi para você corrigir uma linha"), esse plano tem 120 bpm, 15 planos e cerca de 20 efeitos sonoros sintetizados. A verificação de sincronia mediu 14 de 14 cortes na batida, e a verificação de layout não encontrou texto sobreposto em 300 quadros amostrados.

A 40-second film in two acts about how a seed becomes a tree: act one underground (the seed cracks, roots reach down), act two above ground (the shoot breaks through, seasons pass, a tree). Same character style in both acts, one continuous score.

Teste este prompt no iArt →

40 segundos, dois atos, uma trilha só. A câmera acompanha a semente pela terra e sobe até um ano inteiro de estações. O agente manteve o rostinho da semente no tronco até a árvore final. Foi escolha do agente, não botânica.

Passo 4: revise como um diretor e corrija com palavras

Um modelo que escreve milhares de linhas de código de desenho vai cometer erros visuais que não enxerga no código: uma legenda em cima de um personagem, uma cena parada por quatro segundos, um prato de bateria que dá um susto. O fluxo que funciona é renderizar e olhar:

• Uma folha de contato: um quadro a cada meio segundo, tudo numa única imagem. Dá para conferir ritmo, enquadramento e tempo morto de relance (os defeitos descritos embaixo de cada filme desta página foram encontrados assim).
• Verificações automáticas: nenhum asset carregado, texto sem colidir com outro texto ou com objetos, cortes na batida, nenhum salto brusco de volume.
• Depois, diga o que mudar: "as legendas estão pequenas demais no celular", "deixa o segundo ato mais lento", "menos laranja". O agente edita o código e renderiza de novo.

Os problemas mais comuns no primeiro rascunho, nos nossos testes: personagens com contorno grosso e arredondado que parecem infantis, texto desenhado por cima de objetos, trechos longos em que nada se mexe e batidas altas isoladas na música. Uma batida dentro de um groove constante soa bem; a mesma batida depois de um silêncio assusta.

Caminho 1: Claude Code com a skill de código aberto

Se você se sente à vontade no terminal, tudo o que foi descrito acima está empacotado em duas skills de agente gratuitas em iart-ai/javascript-animation-skills (MIT): javascript-animation (a biblioteca de desenho, o fluxo de storyboard, a renderização para MP4 e as autoverificações) e soundtrack (música em Web Audio sobre um mapa de andamento, mais a verificação de sincronia).

# Qualquer agente de código (Claude Code, Cursor, Codex…)
npx skills add iart-ai/javascript-animation-skills

# Ou como plugin do Claude Code
/plugin marketplace add iart-ai/javascript-animation-skills
/plugin install javascript-animation-skills

Requisitos: Node 18+, playwright-core, ffmpeg e Chrome. Nenhuma chave de API. Depois é só pedir com palavras simples:

Make a 40-second hand-drawn explainer on why babies love black-and-white cards. Every frame in code.

O resultado é um único arquivo HTML que você abre no navegador, mais o MP4 renderizado.

"I only asked you to fix one line" ("só pedi para você corrigir uma linha"): um agente transforma a correção de um erro de digitação de uma linha numa cidade inteira da noite para o dia. Um único arquivo HTML de 81 KB; cada nota e cada efeito sonoro é sintetizado com Web Audio.

As skills foram criadas e testadas com o Claude Opus 5.5. Elas também podem ser instaladas no Cursor, no Codex e em outros agentes, mas não testamos outros modelos com elas. Desenhar um filme inteiro exige muito raciocínio espacial e que o modelo revise as próprias folhas de contato, então use o modelo com visão mais forte que você tiver.

Caminho 2: o modo Animation do iArt, sem código

Se você prefere não configurar um terminal, o iArt roda o mesmo método como produto. Abra Create → Animation, digite o prompt, escolha 16:9, 9:16 ou 1:1 e envie. Por baixo, a abordagem é a mesma: um agente rodando no Claude Opus 5.5 escreve o storyboard, o código de desenho e a trilha, confere os próprios quadros, e o filme roda no seu navegador. O que muda em relação a fazer por conta própria:

• Filmes mais longos. Para um filme mais longo, peça para ele continuar: ele adiciona a próxima parte no mesmo projeto, com os mesmos personagens, o mesmo visual e a mesma trilha.
• Edições são frases. Responda dizendo o que mudar; ele edita o código e redesenha.
• Foto de referência. Anexe uma foto e o agente desenha um personagem a partir dela. A foto em si não aparece no filme.
• Exportar e compartilhar. Compartilhe por um link público ou exporte um MP4 com a trilha mixada, codificado no seu navegador.
• Custo. O crédito de US$ 2 do cadastro dá para uma animação de até cerca de 30 segundos; exportar o MP4 exige um plano pago.
• Ainda não. Narração ainda não está disponível no modo Animation; a trilha é música e efeitos sonoros. Se você precisa de narração com texto exato na tela, o modo Motion do iArt também anima escrevendo código (React e GSAP em vez de canvas) e tem narração com IA; veja vídeos explicativos com IA.

"Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name." Uma abertura de canal desenhada em código, e um bom uso desse estilo num canal dark.

FAQ

O Claude consegue fazer animações?

Sim. O Claude Opus 5.5 consegue escrever JavaScript que desenha cada quadro de um curta num canvas HTML, com uma trilha sintetizada pela Web Audio API no mesmo arquivo. Depois, o código é renderizado quadro a quadro em MP4. Filmes como os que circularam depois do lançamento do Opus 5.5 são feitos assim, sem nenhum asset de imagem.

Preciso saber programar?

Não. No Claude Code, o agente escreve todo o código a partir de um prompt em linguagem simples, embora você precise instalar algumas ferramentas. No modo Animation do iArt, você só digita o prompt no navegador.

Qual modelo devo usar?

A skill de código aberto e o modo Animation do iArt foram criados e testados com o Claude Opus 5.5. Outros modelos não foram testados; espere desenhos mais toscos de modelos mais fracos. O modelo precisa lidar com imagens, porque revisa os próprios quadros.

Qual pode ser a duração de uma animação desenhada em código?

Com a skill, o quanto você pedir, embora filmes mais longos levem mais tempo para planejar e revisar. No modo Animation do iArt, um filme mais longo é feito em partes no mesmo projeto: peça para ele continuar até chegar à duração que você quer.

De onde vem a música?

Ela é escrita em código com a Web Audio API: percussão, baixo, pads e um som sintetizado para cada ação na tela, tudo sobre um mapa de andamento para que os cortes caiam na batida. É renderizada offline e mixada no MP4. A skill também funciona com um arquivo de música fornecido por você.

Posso adicionar narração?

Ainda não no modo Animation do iArt; a trilha é música e efeitos sonoros. O modo Motion do iArt, que anima com código React e GSAP, tem narração com IA se você precisa de locução agora.

Faça o seu

Escolha o prompt desta página mais próximo do que você precisa, troque o assunto e rode: no Claude Code com a skill de código aberto, ou no modo Animation do iArt, sem instalar nada. Depois, olhe o primeiro take como um diretor olharia e diga o que mudar. Mais filmes e seus prompts estão na página do criador de animação em JavaScript.