Criador de Animações JavaScript
Cada quadro desenhado em código.
Você só precisa descrever.
Um agente no Claude Opus 5.5 escreve o JavaScript que desenha cada quadro em um canvas
e compõe a trilha sonora em código. Sem imagens, sem filmagens, sem arquivos de áudio, sem terminal.
O que é animação JavaScript?
Um vídeo escrito como código.
Desenhado do zero a cada quadro.
O modo Animation do iArt.ai transforma uma descrição de uma frase em uma animação JavaScript: um vídeo curto em que cada quadro é desenhado num canvas HTML por código escrito por um agente com Claude Opus 5.5. Nada é importado: nada de imagens, banco de vídeos ou arquivos de áudio. A imagem inteira é uma única função, draw(ctx, t), que pinta o canvas para qualquer instante t: personagens, cenários, tipografia, movimentos de câmera. A música e os efeitos sonoros são sintetizados na mesma página com a Web Audio API.
iArt.ai leva esse método para uma aba do navegador. O modo Animation é um agente no Claude Opus 5.5: você descreve o vídeo, ele planeja as batidas e os planos, escreve o código de desenho e a trilha, confere os próprios quadros e reproduz o resultado no seu navegador. Não existe estilo padrão. O visual vem do tema e das suas palavras, então um explicativo sobre pagamentos e uma historinha de ninar para uma criança de dois anos não ficam nada parecidos.
Por que se espalhou agora: desenhar um vídeo inteiro em código depende do raciocínio espacial de um modelo, do seu gosto e da sua capacidade de escrever código longo e cuidadoso, além de conseguir olhar os próprios quadros e corrigi-los. Com o Claude Opus 5.5, os vídeos desenhados em código ficaram bons o bastante para as pessoas começarem a compartilhá-los, e "cada quadro em JavaScript" virou um gênero próprio.
Para a definição completa, veja o que é animação JavaScript. Para fazer você mesmo, passo a passo, leia como fazer uma animação com o Claude Opus 5.5.
Vitrine
Vídeos desenhados inteiramente em código.
Cada vídeo foi feito pelo agente Animation do iArt a partir do prompt abaixo dele. Cada quadro é código de canvas; cada nota é Web Audio. Teste um prompt e você recebe um vídeo na mesma linha, não uma cópia.
“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.”
Testar este prompt →“How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.”
Testar este prompt →“Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.”
Testar este prompt →“Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name.”
Testar este prompt →“A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.”
Testar este prompt →“¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.”
Testar este prompt →Como funciona
Descreva. Planeje. Desenhe. Refine.
Veja o que acontece entre o seu prompt e o primeiro quadro.
01
Descreva o vídeo
Diga o que você quer com palavras simples: o tema, para quem é, a duração, o tom. Escolha 16:9, 9:16 ou 1:1. Anexe uma foto se quiser um personagem baseado em uma pessoa ou pet de verdade: o agente desenha o personagem a partir dela, e a foto em si nunca aparece no vídeo.
02
Ele planeja batidas e planos
Antes de desenhar qualquer coisa, o agente escreve uma grade de batidas e uma lista de planos ambientadas em um único mundo contínuo, além de uma lista de eventos compartilhada que tanto as imagens quanto a música leem. É por isso que os cortes caem na batida.
03
Ele desenha, compõe a trilha e confere
Escreve o código que desenha cada quadro no canvas e a trilha em Web Audio (música e efeitos sonoros), depois revisa os próprios quadros e uma folha de contatos em busca de textos sobrepostos e quadros em branco antes de você ver qualquer coisa.
04
Edite, continue, exporte
Responda no chat para mudar o que quiser; ele edita o código e redesenha. Para um vídeo 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. Compartilhe um link público ou exporte um MP4 com a trilha sonora em um plano pago.
Três motores
Qual motor do iArt você deve usar?
Animation é uma das três formas de fazer um vídeo no iArt. É a ferramenta certa para vídeos desenhados e explicativos, não para tudo.
| Animation | Motion Design | AI Video | |
|---|---|---|---|
| Como é feito | O código desenha cada quadro em um canvas; a trilha é sintetizada em código | O código anima layouts tipográficos (React + GSAP) | Um modelo generativo de vídeo renderiza as imagens |
| Ideal para | Vídeos e explicativos desenhados e ilustrados | Motion graphics: texto exato, dados, marca, produto | Tomadas cinematográficas com cara de filmagem |
| Texto na tela | Exato (desenhado pelo código) | Exato (composto tipograficamente) | Desenhado pelo modelo; a grafia pode variar |
| Recursos | Nenhum: sem arquivos de imagem, vídeo ou áudio | Pode usar suas imagens, logos, slides e dados | Imagens geradas |
| Narração | Ainda não (só música e efeitos sonoros) | Narração com IA integrada | Narração com IA |
Precisa de narração ou da tipografia exata da sua marca? O Motion Design faz as duas coisas; veja vídeos explicativos.
Rode você mesmo,
ou pule a configuração.
O método é open source. Se você vive no terminal, rode com o seu próprio agente de código. Se prefere digitar uma frase no navegador, use o modo Animation.
Claude Code + javascript-animation-skills
Nosso pacote de skills open source ensina ao seu agente de código o mesmo método: grade de batidas e lista de planos, uma biblioteca de desenho, uma trilha em Web Audio, autoverificações e renderização para MP4. Criado e testado com o Claude Opus 5.5.
- – Gratuito e com licença MIT; você usa seu próprio plano do Claude Code ou seu próprio uso da API
- – Roda no Claude Code e em outros agentes de código
- – Requer Node 18+, ffmpeg, Chrome e playwright-core
- – O vídeo é um arquivo HTML que é seu e que você edita à mão
O mesmo método, em uma aba do navegador
Nada para instalar, sem terminal. Descreva o vídeo, assista e mude o que quiser respondendo no chat.
- ✓ Roda em app.iart.ai, na aba Animation da página Create
- ✓ Peça para continuar se quiser um vídeo mais longo
- ✓ Desenha um personagem a partir de uma foto que você anexar
- ✓ Compartilhe um link público; exporte MP4 com a trilha sonora em um plano pago
Perguntas frequentes
Perguntas frequentes sobre animação JavaScript
Não encontrou o que procura? Entre em contato com nossa equipe.
O que é animação JavaScript?
Animação JavaScript, no sentido de animação desenhada em código, é um vídeo em que cada quadro é pintado em um canvas HTML por código: uma função draw(ctx, t) renderiza o que deve aparecer na tela no instante t, e a música e os efeitos sonoros são sintetizados com a Web Audio API. Nada é importado: nada de imagens, filmagens ou arquivos de áudio. O modo Animation do iArt é um gerador de animação com IA que escreve esse código para você a partir de um prompt de texto.
Qual modelo o modo Animation do iArt usa?
Claude Opus 5.5. O agente planeja as batidas e os planos, escreve o código de desenho e a trilha, e revisa os próprios quadros e a folha de contatos antes de mostrar o vídeo para você. A versão open source do método, javascript-animation-skills, também foi criada e testada com o Claude Opus 5.5.
Qual pode ser a duração de um vídeo?
Peça a duração que quiser. Um vídeo mais longo é feito em partes no mesmo projeto, com os mesmos personagens, o mesmo visual e a mesma trilha: peça para ele continuar até terminar. O vídeo da semente que vira árvore, nesta página, foi feito em duas partes e tem 40 segundos.
O modo Animation adiciona locução ou narração?
Ainda não. A trilha sonora do modo Animation é música e efeitos sonoros sintetizados em código. Se você precisa de narração, use o modo Motion Design do iArt, que anima com código React e GSAP e inclui narração com IA.
Posso usar minhas próprias imagens ou fotos?
Você pode anexar uma foto de referência, e o agente desenha um personagem a partir dela; a foto em si nunca aparece no vídeo. Fora isso, nada é importado e nada é gerado como imagem: cada traço na tela é desenhado pelo código.
Quanto custa, e posso baixar o vídeo?
Contas novas recebem um crédito de cadastro de $2, suficiente para criar uma animação de até cerca de 30 segundos. Qualquer vídeo pode ser compartilhado por link público. Exportar um MP4 com a trilha sonora, codificado no seu navegador, exige um plano pago (o Pro custa $20/mês).
Existe um jeito gratuito e open source de fazer isso?
Sim. O javascript-animation-skills (github.com/iart-ai/javascript-animation-skills, MIT) é um conjunto de skills do Claude Code que ensina ao seu agente de código o mesmo método e renderiza o vídeo em MP4 na sua máquina. Requer Node 18+, ffmpeg e Chrome. O modo Animation do iArt é a mesma abordagem, sem a configuração.
Descreva o vídeo.
O agente desenha cada quadro.
Cada quadro desenhado em código, a trilha sintetizada em código, nada importado. Comece com o crédito de cadastro de $2; exporte MP4 em um plano pago.