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 renderiza cada quadro
e compõe a trilha sonora em código. Sem keyframes, sem timeline, sem terminal.
O que é animação JavaScript?
Um vídeo escrito como código.
Renderizado 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 é renderizado por código escrito por um agente com Claude Opus 5.5. A tipografia é composta como texto real, formas e traçados são desenhados em SVG, e uma camada de canvas pinta tudo o que é desenhado à mão, partículas ou texturas; cada quadro é uma função do tempo, então o vídeo reproduz, avança e exporta do mesmo jeito. A música e os efeitos sonoros são sintetizados em código 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 da animação 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.
O Claude Motion não está no seu plano? Veja quatro formas de fazer o mesmo tipo de animação sem ele.
Vitrine
Vídeos desenhados inteiramente em código.
Cada vídeo foi feito no modo Animation do iArt a partir do prompt abaixo dele, com cada quadro e cada nota escritos em código. 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 →“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.”
Testar este prompt →“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.”
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 suas capturas de tela ou seu logo para mostrá-los no vídeo, ou uma foto para servir de base a um personagem desenhado.
02
Ele planeja batidas e planos
Antes de escrever qualquer código, o agente decide os planos: o que cada um mostra, quanto tempo dura e onde caem os cortes e os impactos sonoros. As imagens e a música leem os mesmos tempos, e é por isso que os cortes caem na batida.
03
Ele desenha, compõe a trilha e confere
Escreve o código que renderiza cada quadro 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 cortados, sobreposições 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 renderiza de novo. Compartilhe um link público ou, em um plano pago, exporte um MP4 com a trilha sonora ou um WebM transparente para sobreposições.
Dois motores
Qual motor do iArt você deve usar?
Animation é uma das duas formas de fazer um vídeo no iArt. É a ferramenta certa quando as palavras, os dados e o timing precisam ser exatos, não para imagens com cara de filmagem.
| Animation | AI Video | |
|---|---|---|
| Como é feito | O código renderiza cada quadro (texto composto tipograficamente, SVG, uma camada de canvas); a trilha é sintetizada em código | Um modelo generativo de vídeo renderiza as imagens |
| Ideal para | Explicativos, motion graphics, vídeos ilustrados, sobreposições | Tomadas cinematográficas com cara de filmagem |
| Texto na tela | Exato (composto tipograficamente em código) | Desenhado pelo modelo; a grafia pode variar |
| Recursos | Nenhum necessário; suas capturas de tela, logos, imagens e clipes também podem aparecer | Imagens geradas |
| Narração | Narração com IA (escolha uma voz) | Narração com IA |
Vai fazer um explicativo com a tipografia exata da sua marca ou gráficos de dados? 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 qualquer duração; vídeos longos são divididos em cenas
- ✓ Mostra suas capturas de tela, seu logo ou seu site, ou desenha um personagem a partir de uma foto
- ✓ Narração com IA opcional
- ✓ Compartilhe um link público; exporte um MP4 com a trilha sonora, ou um WebM transparente para sobreposições, 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 renderizada por código, é um vídeo em que cada quadro é produzido por código: uma função do tempo decide o que aparece na tela a cada instante, usando texto composto tipograficamente, formas SVG e desenho em canvas, e a música e os efeitos sonoros são sintetizados com a Web Audio API. 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 da animação 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 é dividido em cenas no mesmo projeto, com o mesmo visual e a mesma trilha, e você pode mudar qualquer cena depois respondendo no chat. O vídeo da semente que vira árvore, nesta página, tem 40 segundos.
O modo Animation adiciona locução ou narração?
Sim. Escolha uma voz na caixa de mensagem e o vídeo ganha narração, com a imagem sincronizada às palavras. Sem voz, a trilha sonora é música e efeitos sonoros sintetizados em código.
Posso usar minhas próprias imagens ou fotos?
Sim. Capturas de tela, logos, fotos de produto e gravações de tela curtas que você anexar aparecem no vídeo do jeito que são; uma foto de uma pessoa ou de um visual de que você gosta serve de referência para um personagem desenhado ou para o estilo. Você também pode passar o endereço do seu site.
Quanto custa, e posso baixar o vídeo?
Contas novas recebem um crédito de cadastro de $2. Com $2 dá para fazer um vídeo de menos de 30 segundos. Qualquer vídeo pode ser compartilhado por link público. Exportar um MP4 com a trilha sonora exige um plano pago (o Pro custa $20/mês). Já sobreposições, como lower thirds, são exportadas como WebM transparente.
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 escreve cada quadro.
Cada quadro e a trilha escritos em código. Comece com o crédito de cadastro de $2; exporte MP4 em um plano pago.