Exemplos de animação em canvas: 7 filmes desenhados quadro a quadro em JavaScript, com os prompts e o que medimos
Desde que o Claude Opus 5.5 saiu, "every frame drawn in JavaScript" ("cada quadro desenhado em JavaScript") virou um gênero: curtas em que um programa pinta cada quadro num canvas HTML e a música é sintetizada na mesma página. Este artigo reúne exemplos de animação em canvas feitos desse jeito, no modo Animation do iArt e com a skill de código aberto, cada um com o prompt exato que o gerou e o que a gente corrigiria. No fim, há uma tabela em que rodamos o mesmo script de medição nos nossos filmes e em quatro dos filmes que circularam no X, para você ver como eles de fato diferem.
Ative o som para ouvir a trilha: ela também é código. Os prompts desta página aparecem no inglês original; o app aceita prompts em qualquer idioma.
O que esses exemplos têm em comum
Todos os filmes abaixo foram feitos por um agente rodando no Claude Opus 5.5 a partir de um prompt de uma frase, sem nenhum arquivo de imagem, filmagem ou áudio. Primeiro o agente planejou uma grade de batidas e uma lista de planos, depois escreveu o código de desenho e a trilha e, antes de terminar, conferiu a própria folha de contato. Nada foi editado à mão depois. É por isso que cada legenda aponta um defeito: os defeitos são o que o primeiro take realmente tem. O método é explicado passo a passo em como fazer uma animação em que cada quadro é desenhado em JavaScript, e o termo em si no verbete de glossário animação em JavaScript.
1. Como o ChatGPT escolhe a próxima palavra (explicativo 9:16)
How does ChatGPT actually pick the next word? A 25-second vertical explainer for TikTok, no jargon.
O que observar. É o filme lá de cima. O agente transformou "escolher a próxima palavra" numa roleta de prêmios em que o tamanho de cada fatia é a probabilidade, e a roleta é a explicação inteira: ler, calcular as chances, girar, acrescentar e repetir o ciclo para a palavra seguinte. Um marcador de etapas fica fixo no topo, então você sempre sabe em que ponto está. As probabilidades na tela vêm identificadas como números de exemplo inventados, e numa das repetições rápidas quem ganha é a segunda palavra mais provável, para mostrar que nem sempre sai a primeira da lista.
O que a gente corrigiria. O filme fala em "palavra" do começo ao fim; na verdade o ChatGPT escolhe pedaços de palavra, algo que o agente deixou de fora para evitar jargão. O terço inferior do quadro fica bem vazio nos primeiros sete segundos.
2. Como o celular sabe onde você está (explicativo 1:1)
How does your phone know where you are? A 25-second GPS explainer for my science Instagram, playful but accurate.
O que observar. "Divertido, mas preciso" virou o visual de um fanzine de ciência em risografia: tintas chapadas azul e rosa sobre papel creme e um celularzinho rosa como personagem. A física está certa e desenhada em escala: cerca de 30 satélites a 20.200 km, um sinal cronometrado em 0,070 s que vira 21.000 km, três círculos de distância que se cruzam no celular e, por fim, o pulo do gato: o relógio do próprio celular está errado, e um quarto satélite resolve isso. A trilha é de marimba e percussão de woodblock, com um som para cada estalo, pulso e alfinete no mapa.
O que a gente corrigiria. O posicionamento é desenhado com círculos planos, e não com esferas, a simplificação de sempre. Nos planos abertos o celular tem uns 30 px de altura, então a pose de "escutando" quase não aparece, e o quarto satélite fica fora da tela enquanto o círculo dele chega.
3. O meio segundo depois que você aperta Enter (explicativo 16:9)
What happens in the half second after you type a website address and press Enter? A 30-second explainer for our developer newsletter.
O que observar. Um único mapa de rede contínuo que a câmera percorre: DNS, depois o handshake TCP como fichas SYN / SYN-ACK / ACK correndo por um fio, depois o TLS com a checagem do certificado e um cadeado, depois GET / e 200 OK e, por fim, a página sendo pintada. Cada mensagem é uma ficha que mostra literalmente o que ela diz. Âmbar para o que o navegador envia, branco-gelo para as respostas, e verde só depois que a conexão está criptografada. O endereço de exemplo resolve para 203.0.113.42, uma faixa reservada para documentação, então não é o servidor real de ninguém.
O que a gente corrigiria. Nos planos abertos as fichas têm 25–35 px na tela, pequenas num celular. Os primeiros 3,7 segundos são bem parados (só a pergunta e a digitação), e o filme simplifica: não tem cache de DNS nem HTTP/3.
4. A história da IA moderna em 30 segundos (16:9)
A 30-second history of modern AI, from the 2017 paper 'Attention Is All You Need' to today's AI agents that write code. For a tech YouTube channel.
O que observar. Seis eras, um plano para cada, com uma barra de linha do tempo marcando o ano na parte de baixo: o artigo de 2017, com a atenção desenhada como arcos entre as palavras do título; GPT e BERT em 2018; tamanhos de modelo desenhados como quadrados cuja área corresponde ao número de parâmetros (117M, 1,5B, 175B); uma janela de chat em 2022; um modelo de raciocínio contando os "r" de "strawberry"; e um agente de programação cujos testes passam. O agente se limitou a fatos na tela de que tinha certeza e não usou nomes de produto depois de 2022.
O que a gente corrigiria. O afastamento final encolhe as seis eras em miniaturas que não dão para ler, e as legendas de 29 px ficam pequenas num celular. É também o filme mais escuro daqui, e aquele em que o gosto da casa do modelo (fundo azul-escuro com detalhes em âmbar) mais aparece.
5. A lua põe as estrelas para dormir (1:1, para uma criança de 2 anos)
A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.
O que observar. Mesmo motor, registro oposto: personagens arredondados, olhos grandes, uma lua de touca de dormir e movimento suave quase o tempo todo. Na tabela de medições mais abaixo, este é o único filme nosso que se mexe tanto quanto os virais. "Divertido para uma criança de dois anos" é um briefing que o agente lê como um visual, e não só como um tema.
O que a gente corrigiria. A trilha tem a menor faixa de volume do conjunto (cerca de 4 dB), o que combina com a hora de dormir, mas faz os cortes caírem de leve, e não numa batida que dê para sentir.
6. Por que a Lua muda de forma (1:1, em espanhol)
¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.
O que observar. Um prompt em espanhol gera um filme em espanhol, com o texto na tela escrito exatamente certo, porque o texto é desenhado por código e não por um modelo de vídeo. A explicação é a correta (a Lua não tem luz própria; a cada noite vemos uma fatia diferente da metade iluminada; o ciclo dura cerca de 29 dias e meio), desenhada como um diagrama Sol–Terra–Lua com quadros de "como a gente vê".
O que a gente corrigiria. Com 40 segundos, é o filme mais longo daqui e o mais parado depois da história da IA: 37% dos quadros têm movimento visível. Um canal infantil ia querer mais movimento entre as etapas do diagrama.
7. "Só pedi para você corrigir uma linha" (exemplo de código aberto)
O que observar. Este foi feito com a skill javascript-animation de código aberto no Claude Code, e não no app, e é uma comédia, não um explicativo: alguém pede a correção de um erro de digitação de uma linha à 01:58 e vai dormir, e às 08:30 o código virou uma cidade inteira. É um único arquivo HTML de 81 KB; cada nota e cada efeito sonoro é sintetizado pelo mesmo arquivo. As verificações do repositório mediram 14 de 14 cortes na batida e nenhum texto sobreposto em 300 quadros amostrados.
O que a gente corrigiria. A primeira versão deste filme parecia infantil (arredondada, com contorno, estilo chibi) e tinha texto em cima de objetos; a versão daqui é a segunda passada, com um visual cinematográfico chapado e linhas de construção. Foi preciso uma revisão de diretor para chegar lá, e esse é o passo que o app agora faz por você.
O que medimos: nossos filmes vs. os que circularam
Rodamos um único script em todos os filmes deste artigo e em quatro dos filmes compartilhados no X depois do lançamento do Opus 5.5. Ele reduz cada filme a 10 quadros por segundo numa miniatura de 48×48 em tons de cinza e mede quatro coisas: movimento médio (a variação média dos pixels entre quadros consecutivos; quanto maior, mais coisa acontece por segundo), quadros com movimento (a fração de intervalos de 0,1 segundo com mudança visível), cortes secos a cada 10 segundos e faixa de volume (decibéis entre o segundo mais alto e um trecho baixo). Para os filmes públicos, só informamos nossas medições e colocamos o link para os posts originais; não os hospedamos de novo.
| Filme | Duração | Movimento médio | Quadros com movimento | Cortes secos / 10 s | Faixa de volume |
|---|---|---|---|---|---|
| Watermelon (Kevin Ngo, compartilhado por @claudeai) | 29 s | 10.9 | 85% | 13.3 | 11 dB |
| "What do you love?" (Kevin Ngo) | 28 s | 11.4 | 97% | 12.5 | 6 dB |
| "Small print" (@Voxyz_ai) | 29 s | 8.2 | 98% | 0 | 7 dB |
| Video-editor demo (@NFT_Chen) | 30 s | 4.5 | 94% | 9.0 | 7 dB |
| 5. A lua põe as estrelas para dormir | 20 s | 4.8 | 80% | 6.0 | 4 dB |
| 7. Só pedi para você corrigir uma linha | 30 s | 3.5 | 52% | 6.0 | 14 dB |
| 1. Como o ChatGPT escolhe a próxima palavra | 26 s | 2.1 | 38% | 1.9 | 12 dB |
| 2. Como o celular sabe onde você está | 25 s | 1.4 | 26% | 2.0 | 8 dB |
| 6. Por que a Lua muda de forma | 40 s | 1.2 | 37% | 1.5 | 6 dB |
| 3. O meio segundo depois que você aperta Enter | 30 s | 1.2 | 33% | 1.0 | 12 dB |
| 4. A história da IA moderna em 30 segundos | 30 s | 1.1 | 24% | 1.3 | 14 dB |
O padrão é claro. Os filmes que viralizaram se mexem quase o tempo todo (85–98% dos quadros) e se mexem muito (movimento médio de 4,5 a 11,4), com um corte a cada segundo ou menos. Nossos explicativos ficam parados para você conseguir ler: 24–38% dos quadros têm movimento, e o movimento médio fica entre 1,1 e 2,1. Isso é diferença de gênero, não nota de qualidade. Um explicativo que se mexesse como o filme da melancia seria impossível de ler, e os dois filmes nossos que são histórias, e não explicativos (o de hora de dormir e a comédia), ficam bem mais perto do grupo viral. Se você quer aquela sensação de viral, peça no prompt: movimento constante, um corte em cada batida, nada para ler.
A coluna de volume é o outro número honesto. Nossos filmes têm dinâmica mais ampla (até 14 dB) do que a maioria dos virais (6–7 dB), porque as trilhas são compostas com seções e uma pausa em silêncio. Isso faz os cortes baterem mais forte, mas pode assustar quando uma batida surge do silêncio. A verificação de sincronia da skill soundtrack aponta exatamente isso.
FAQ
O que é uma animação em canvas?
Uma animação em canvas é uma animação desenhada por código num elemento canvas do HTML, quadro a quadro: uma função pinta a imagem inteira de cada instante, então nada na tela é uma imagem ou um vídeo importado. Os filmes desta página são animações em canvas cujo código foi escrito pelo Claude Opus 5.5, com a música sintetizada pelo mesmo código.
Esses exemplos foram editados à mão?
Não. Cada filme é o primeiro take entregue pelo agente a partir do prompt mostrado, incluindo os defeitos listados embaixo dele. O filme 7 é a segunda passada de um exemplo de código aberto, em que uma revisão de diretor mudou o visual; essa revisão agora faz parte do que o próprio agente do app faz.
Consigo fazer um desses eu mesmo?
Sim. Clique em "Teste este prompt" embaixo de qualquer exemplo para abri-lo no modo Animation do iArt, ou instale a skill javascript-animation de código aberto no Claude Code. O método completo está no guia passo a passo com link mais acima.
Por que os filmes virais se mexem tanto mais do que estes?
Eles são loops e histórias, não explicativos. Nossas medições mostram que os filmes compartilhados têm movimento visível em 85–98% dos quadros; os explicativos fazem pausas para o texto poder ser lido, o que os deixa em 24–38%. Peça movimento constante e cortes em cada batida se é essa a sensação que você quer.
Como as medições foram feitas?
Um script curto reduz cada filme a 10 quadros por segundo em 48×48 tons de cinza e calcula a variação média dos pixels entre quadros, a fração de quadros com mudança visível, o número de cortes secos e a faixa de volume do áudio em decibéis. O mesmo script rodou em todos os filmes, os nossos e os públicos.
Faça o seu
Todos os prompts desta página têm uma frase só. Pegue o mais próximo do que você precisa, troque o assunto e rode no modo Animation do iArt. Se você está fazendo uma série para um canal, a página do criador de vídeos para canal dark mostra os formatos mais longos que o iArt também produz, e a página de vídeo explicativo trata dos explicativos com narração.