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. Cada prompt abaixo começa com as palavras exatas que geraram o filme.

"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.

Como escrever um prompt para uma animação desenhada em código

Uma frase já faz um bom filme: a pergunta que ele responde, para quem é, a duração e o formato. Para um filme mais profissional, escreva o prompt como um briefing curto, nesta ordem:

[Uma ou duas frases: o que é o filme, a duração, o formato.]

IDEA: o único assunto ou recurso que sustenta o filme inteiro.

0–2s: o que está na tela, o que se mexe e como, as palavras exatas.
2–5s: …
(uma linha por batida, até o fim)

LOOK: fundo e paleta (códigos hex), tipografia, texturas, composição.
MOTION: onde é rápido, onde segura, como um plano passa para o seguinte.
SOUND: a música (andamento, instrumentos, clima) e um som para cada ação. Escreva "No narration." se não houver narração.

Os prompts deste guia foram escritos assim: a primeira frase é a que gerou o filme, e o resto descreve esse filme segundo a segundo. Em comparações às cegas lado a lado no modo Animation do iArt (um modelo de IA assistiu aos dois filmes nas duas ordens), o briefing completo venceu só a frase de abertura em cinco dos seis filmes que testamos, e empatou no sexto. Ele demora mais para ficar pronto e gasta mais créditos, porque há mais coisa para construir. O jeito mais rápido de escrever um é descrever, segundo a segundo, um filme de que você gosta.

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 (MDN: Canvas API). 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(), cuja semente não pode ser escolhida nem redefinida (MDN). 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.

Três filmes em que o visual é descrito no prompt, em palavras simples:

Paper cut-out collage style, like a children's picture book made of construction paper. A little boy at his window can't sleep, so a small friendly cloud drifts down over the rooftops, borrows a bit of moonlight and glows like a nightlight until he dozes off. 20 seconds, square 1:1.

IDEA: One small smiling paper cloud is the hero: it drifts to the moon, soaks up its golden light, then floats down beside the boy's window. The film is the cloud turning from plain cream paper into a glowing nightlight.

0–3.3s: wide shot of a sleepy town at night: purple paper gabled houses, deep blue starry sky, a big textured full moon upper right. In a warm yellow attic dormer, a boy in blue leans out and looks up.
3.3–6.7s: cut to a medium close-up of the boy framed in the glowing dormer. He yawns wide, rubs one eye with his fist, then rests his chin on his folded hands on the sill.
6.7–10s: back to the wide sky. A fluffy cream paper cloud with a smiling face drifts in from the upper left and glides slowly across the stars toward the moon.
10–13.3s: close-up on the moon. The cloud eases up against its left edge and nuzzles it. Soft yellow light pulses between them, sparkles twinkle, and warm gold spreads through the cloud from inside. It blushes and smiles.
13.3–16.7s: medium-wide on the rooftop. The now golden, glowing cloud floats down on a slow eased arc and settles gently right beside the open dormer window.
16.7–20s: medium shot of the window and the glowing cloud. Tiny yellow star sparkles drift around them. The boy's eyes grow heavy and close with a contented smile as he dozes off. Hold in stillness to the end.

LOOK: midnight indigo sky #1E2243 and #262B54, plum and slate-purple rooftops #3C335C and #4D476D, warm lamp yellow windows #FED466 and #F6AD3C, creamy moon #F8E7A2 and #EED37A, cloud cream #F4EEDC turning golden. Everything is cut from textured construction paper: fibre grain, stippled roofs and sky, torn deckled edges. The glowing window anchors the centre; moon and cloud live in the upper third.

MOTION: slow, low-energy, lullaby pace. The cloud drifts smoothly with soft eased stops at the moon and at the window, with a gentle squash and stretch as it floats. The boy moves like a paper puppet: stepped blinks, swapped mouth shapes for the yawn, a simple arm rub.

SOUND: a slow, gentle lullaby on fingerpicked nylon-string guitar and warm acoustic bass with soft celesta and glockenspiel accents. Magical chimes and a soft sparkle sweep when the cloud touches the moon and fills with light, faint twinkles as it descends. The music never stops. No narration.

Teste este prompt no iArt →

O visual de colagem de papel é o que o clipe do Kevin Ngo popularizou; a história é nossa.

Black-and-white ink woodcut style, rough carved lines on off-white paper. A girl folds a paper boat and sets it into the rain gutter; as it drifts through the city at night, every window it passes lights up and someone folds another boat. Short hand-lettered captions. 25 seconds, 16:9.

IDEA: One paper boat drifting left to right along the gutter is the spark. Every window it passes snaps on, and the light spreads like a chain reaction until the whole city glows and the gutter is full of boats.

Captions: lowercase hand-lettered white text in a black banner at the bottom, one per shot.

0–2.6s: a dark, hatched, rain-soaked skyline inks in on off-white paper, a small girl sitting on her front steps, rain lines jittering. Caption: "a dark, wet city".
2.6–5.1s: close-up of her mittened hands folding a cream sheet: triangle hat, brim, pop open into a boat. Caption: "she folded one boat".
5.1–7.6s: the girl with pigtails reaches down from the stoop, sets the boat on the gutter stream and lets go; it drifts right, bobbing. Caption: "and let it go".
7.6–12.6s: track right with the boat past dark facades. A ground-floor window bursts on with cream light and pointed rays, a silhouette inside; neighbours pop on; from an upper window someone drops another boat. Caption: "one window woke".
12.6–15.1s: wider street. Windows pop on in a ripple along the whole block; several boats now float together. Caption: "then the next street".
15.1–20.1s: the opening skyline again; light spreads across tenements and far towers until hundreds of windows glow. Caption: "then the whole city".
20.1–22.6s: low tracking shot along the curb: dozens of boats in a tight convoy, silhouettes watching from lit windows. Caption: "boats, and more boats".
22.6–25s: her building, every window lit; the girl sits in the central arched window holding a folded paper bird. Caption: "it started with one." Hold.

LOOK: strictly two tones like a linocut print: off-white paper #F3EFE6, carbon black #161412 for buildings, figures and banners, bright cream #FFFDF8 for window light and boats. Rough carved lines, heavy crosshatching, spiky ray bursts around lit windows. Flat side-on framing, water line low.

MOTION: animated on twos, hand-printed feel. Folds and windows snap on instantly with a short ray burst; boats drift smoothly with a gentle bob. Hard cuts; the only camera move is a slow pan along the water. The light spreads faster and faster.

SOUND: reflective fingerpicked acoustic guitar around 75–80 BPM, melancholy turning hopeful, over continuous rain hiss. Paper creases on each fold, a soft water dip, a warm switch click and small chime per window, clicks multiplying as the city lights up, a last chord ringing into the rain. No narration.

Teste este prompt no iArt →

Inspirado na animação em nanquim de @shfred0.

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

IDEA: One illustrated textbook page. Follow a sunbeam into the air: molecules knock the short blue waves off in every direction while red passes straight on, and that scattered blue reaches a boy's eye from all over the sky.

Throughout: header "CHAPTER 7 · LIGHT AND THE AIR", page "143", a title at the top, a "Fig." caption at the bottom, all typed on letter by letter.

0–3.8s: a boy in a blue cap in a field, a crosshatched red sun above. Title: "Why Is the Sky Blue?" Caption: "Fig. 7-1. On a clear day the whole sky looks blue. But sunlight itself looks white. Where does the blue come from?"
3.8–7.6s: push in to the sun; a white beam carries a long red wave and a short blue wave side by side. Labels pop in: "WHITE SUNLIGHT", "RED: LONG WAVES", "BLUE: SHORT WAVES". Title: "1. Sunlight is a mix of colors". Caption: "Fig. 7-2. White sunlight holds every color of the rainbow. Red light travels in long waves; blue light in short ones."
7.6–12.6s: along the beam among paired-circle molecules ("AIR MOLECULE"), the blue wave hits one and sprays out in rings: "BLUE BOUNCES OFF IN ALL DIRECTIONS". The red wave carries on: "RED PASSES STRAIGHT ON". Table top right, "LIGHT SCATTERED BY AIR": RED 1x, BLUE counting up to 6x. Title: "2. Air scatters the short waves". Caption: "Fig. 7-3. Tiny molecules of air knock short blue waves off in all directions, about six times more than long red ones."
12.6–16.4s: back to the field; dashed blue lines run from molecules all over the sky into the boy's eye ("YOUR EYE"). Title: "3. Blue arrives from every direction". Caption: "Fig. 7-4. Wherever you look, scattered blue light is coming toward your eye. So every part of the sky looks blue."
16.4–20s: full diagram holds. Title: "In Short". Caption becomes a bordered box: "The air scatters blue light out of sunlight, all across the sky. That is why the sky is blue." Hold.

LOOK: aged newsprint #EDE7D7, vermilion #D75D4E for sun and red wave, cornflower blue #4B78A4 for blue wave and sky lines, mustard ground #C4B17B, olive tree #8A7D58, faded charcoal #22201E lines and text. Lithograph print feel: fine horizontal ruling, crosshatch shading, a double-ruled diagram frame. Bold sans titles, plain sans captions, caps labels.

MOTION: calm classroom pace with holds for reading. Waves travel at steady speed; scatter rings expand smoothly, no bounce.

SOUND: warm, minimal electric piano chords around 80 BPM. Typewriter clacks on all typing, no whooshes, a resolving chord and one last key strike. No narration.

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

Um prompt curto que diga a tarefa basta para começar: a pergunta que o filme responde, o público, a duração e o formato. Você não precisa escrever a lista de planos, porque planejá-la é o primeiro passo do agente (Passo 3); escrevê-la você mesmo, como no briefing acima, deixa o resultado mais perto do filme que você tem em mente. Vale colocar na frase de abertura:

• 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 (as especificações do TikTok recomendam o vertical 9:16 — TikTok for Business).
• 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.

IDEA: One cutaway earcup on a listener's head is the whole diagram. Red noise wave in, mic hears it, chip flips it teal, speaker plays it, red plus teal add to a flat line. A bottom meter drops LOUD, MUFFLED, QUIET.

0–2.4s: an annoyed listener faces a fan-like engine labelled "ENGINE HUM". A red sine wave travels into his ear; the bottom meter "NOISE AT YOUR EAR" fills red to "LOUD". Question card drops in at the top: "How do headphones erase noise?"
2.4–3.8s: over-ear headphones slide down onto his head and open into a cutaway: outer mic, chip, inner speaker. The cushion damps the wave; meter falls to "MUFFLED".
3.8–7.6s: punch in on the earcup. Card: "STEP 1 / A mic outside hears the noise". A pulsing ring marks the mic; a screen on the chip traces the red wave.
7.6–11.3s: card: "STEP 2 / A chip flips it upside down / every peak becomes a dip". The wave on the chip screen flips vertically and turns teal.
11.3–12.6s: card: "STEP 3 / The speaker plays the flipped wave". The speaker sends the teal wave into the ear alongside the red one. Equation: "NOISE" + "FLIPPED" = "YOU HEAR".
12.6–15.2s: card: "PEAK + DIP / They cancel out / the hum mostly disappears". Red and teal overlap and flatten into one grey line; meter shrinks to "QUIET" in green.
15.2–18.8s: slight pull back. Card: "THE CATCH / Best on steady hums like engines & fans / sudden sounds get through more".
18.8–22s: reframe on the now smiling listener. Four lines stamp on one by one: "Hear it." "Flip it." "Play it." "Quiet." Hold.

LOOK: warm off-white paper #F1EFE8 with fine grain. Charcoal #22252A headphones and outlines, warm grey #7F7C77 clothes and parts, coral red #D84337 for the noise wave and LOUD, teal #26B5A1 for the flipped wave, forest green #2D6A4F for QUIET. Minimal flat infographic: cutaway diagram, pill badges, thin line waves. Bold sans headlines, small tracked caps labels, text kept in the upper and lower thirds.

MOTION: clear cause-and-effect pace; each card holds one to two seconds to read, then swaps with a quick slide or dissolve. Props move fast with a snappy ease-out; waves scroll smoothly and continuously.

SOUND: warm fingerstyle acoustic guitar with soft piano and a light beat, around 90–100 BPM, under a steady low engine drone at the start. A click and muffled filter sweep as the headphones seal, blips on the mic, a rising synth whoosh on the flip, then the drone cuts out abruptly at the cancel. Soft woodblock pops on each final line, chords resolving. No narration.

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.

IDEA: One little acorn with a face is the hero throughout, seen in a fixed side-on cross-section with soil below, sky above. It wakes, roots, sprouts, becomes an oak, lives through the seasons, and ends by dropping a new acorn, closing the loop.

0–4.5s: brown soil layers under rain; a tiny acorn sleeps underground above a pebble. A small grey badge appears top left: "Act I · Below". Drops seep down toward it.
4.5–9s: close-up: three drops land on its cap, its eyes pop open with a smile, the shell cracks and a pale first root pushes downward.
9–19.5s: wide again. The root drives down, curves around the pebble and branches into side roots. A green shoot pushes up through the soil, pausing just below the surface.
19.5–25s: the shoot breaks through. Badge changes to "Act II · Above". Two rounded first leaves unfold and spread; the seedling smiles up at the sky.
25–30s: the stem thickens into a trunk, the acorn's face still at its base. Branches grow and burst into round green leaf clusters with small pink blossom dots; a warm sun rises upper right.
30–33s: autumn. The sky warms; the canopy turns golden orange and leaves drift down to the ground.
33–36s: winter. Bare branches, snow falling, a white layer building on the soil. The face sleeps calmly.
36–40s: spring. The snow melts, green canopies pop back with blossoms, an acorn ripens on a branch, falls and lands on the soil with two small bounces.

LOOK: soil in deep chocolate #4A3322 and umber #5A3D28 with tan flecks #9C8471; sky parchment cream #EBE5D8; acorn golden ochre #D89849 with chestnut cap #8C5A28; stem green #88A878; foliage sage #94B097 and olive #5F8265, autumn orange #C8873E, blossom coral #E28A7A; sun amber #E2A35B. Flat shapes with light paper grain, simple line roots and branches, round canopies. Badge: small grey #7E858C rounded box, white text.

MOTION: calm, readable, with pauses between each stage of growth. Springy squash and stretch on the crack, leaf pops and landing; smooth easing on root and branch growth. Seasons change in place with colour shifts, falling leaves and snow.

SOUND: one unbroken, unhurried fingerstyle acoustic guitar score, thinning in winter, lifting for spring. Drip pings underground, a crisp shell crack, soft pops on eye-open and when the shoot breaks through, birdsong above ground, woody rustles, an autumn breeze, quiet winter wind, a spring chime, and a hollow thud as the new acorn lands. No narration.

Teste este prompt no iArt →

40 segundos, duas partes, 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 a segunda metade mais lenta", "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 ideia é a mesma: um agente rodando no Claude Opus 5.5 escreve o storyboard, o filme como código (texto tipografado, SVG e dados, com uma camada de canvas para o trabalho desenhado à mão, como nos filmes desta página) 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. Peça a duração que você quer; um filme mais longo leva mais tempo para gerar e custa mais.
• Edições são frases. Responda dizendo o que mudar; ele edita o código e redesenha.
• Suas imagens. Anexe capturas de tela, um logo ou fotos de produto e eles aparecem no filme como são; anexe a foto de uma pessoa ou de um estilo de que você gosta e ela vira referência para um personagem ou estilo desenhado. Diga qual é qual. Você também pode passar o endereço do seu site.
• Exportar e compartilhar. Compartilhe por um link público ou exporte um MP4 com a trilha mixada, renderizado na nuvem (1080p no Pro, 4K no Ultra). Sobreposições como lower thirds são exportadas como WebM transparente.
• Custo. Um filme de 20–30 segundos custa cerca de US$ 0,60–1,00 e leva cerca de 4–5 minutos para gerar, então o crédito de US$ 2 do cadastro dá para dois ou três; exportar o MP4 exige um plano pago.
• Narração. Escolha uma voz na caixa de mensagem e o filme ganha narração, com a imagem sincronizada às palavras. Sem voz, a trilha é música e efeitos sonoros.

"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.

Qual deve ser o tamanho do prompt?

Uma ou duas frases bastam para um bom filme: o que ele é, a duração, o formato e o momento que importa. Para um filme mais profissional, acrescente um briefing curto de cerca de 300 a 450 palavras: a ideia única que sustenta o filme, os planos segundo a segundo com as palavras exatas na tela, o visual, o movimento e um som para cada ação. Um briefing demora mais para ficar pronto e gasta mais créditos.

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, peça a duração que você quer; um filme mais longo leva mais tempo para gerar e custa mais.

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?

Sim. No modo Animation do iArt, escolha uma voz na caixa de mensagem; o agente escreve o texto, grava e sincroniza a imagem com ele. Sem voz, a trilha é música e efeitos sonoros.

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.