Animação em JavaScript
Animação em JavaScript é o movimento criado por código no navegador, movendo elementos da página ou desenhando cada quadro num canvas, o que permite produzir filmes inteiros sem arquivos de imagem.
O que é animação em JavaScript?
Animação em JavaScript é o movimento criado por código rodando num navegador: um script muda o que aparece na tela ao longo do tempo, seja movendo elementos da página (HTML, SVG), seja desenhando cada quadro num <canvas>. É ela que dá movimento às interfaces de sites, e também pode produzir filmes animados inteiros, sem nenhum arquivo de imagem ou vídeo, quando o próprio código desenha cada quadro.
O termo abrange duas coisas bem diferentes:
- Animar elementos da página. Bibliotecas como GSAP e anime.js, ou a Web Animations API nativa do navegador, movem, esmaecem e transformam botões, textos e formas SVG numa linha do tempo. É assim que a maior parte do movimento em sites é construída.
- Desenhar cada quadro num canvas. Uma função pinta a imagem completa de um determinado instante, e o navegador a chama quadro após quadro. Na tela não existe nada além do que o código desenha. Esse é o tipo de animação que se espalhou depois do lançamento do Claude Opus 5.5, descrito como "every frame drawn in JavaScript" ("cada quadro desenhado em JavaScript").
Como funciona a animação em JavaScript desenhada em código
Na abordagem com canvas, um filme é uma função pura do tempo, draw(ctx, t): o mesmo t sempre gera a mesma imagem. É essa propriedade que permite renderizá-lo. Um navegador headless pula para cada quadro, captura a imagem e grava um MP4, com precisão de quadro, não importa quanto tempo cada quadro leve para ser desenhado. Três técnicas dão a esses filmes um aspecto de feito à mão:
- Aleatoriedade com semente para linhas trêmulas e preenchimentos com cara de nanquim que saem idênticos a cada renderização, em vez de piscar.
- Música sintetizada com a Web Audio API na mesma página, renderizada offline e mixada no vídeo.
- Uma linha do tempo compartilhada (andamento, planos, eventos), lida tanto pelo código de desenho quanto pela música, para que os sons caiam em cima das ações e os cortes caiam na batida.
Animação em JavaScript vs. animação por keyframes vs. vídeo com IA
| Animação em JavaScript (canvas) | Animação por keyframes | Geração de vídeo com IA | |
|---|---|---|---|
| O que gera os quadros | O código desenha cada um | O software interpola entre poses-chave | Um modelo de vídeo prevê os pixels |
| Arquivos necessários | Nenhum | Desenhos, vetores, filmagens | Nenhum |
| Texto na tela | Exato | Exato | Pode distorcer |
| Renderizar de novo | Idêntico toda vez | Idêntico | Diferente toda vez |
| Uso típico | Vídeos explicativos, loops, curtas estilizados, movimento na web | Animação de personagens e motion design | Cenas fotorrealistas ou cinematográficas |
Mais sobre a coluna do meio em animação por keyframes, e sobre como a IA muda esse processo em animação com IA vs. animação por keyframes.
Casos de uso comuns
- Vídeos explicativos: como um pagamento com cartão é aprovado, por que o céu é azul, como funciona o cancelamento de ruído. Diagramas, rótulos e movimentos de câmera, tudo desenhado em código.
- Aberturas de canal e loops para YouTube, TikTok e Instagram, incluindo canais dark.
- Histórias curtas e livros ilustrados: um personagem desenhado a partir de uma foto de referência, uma história para dormir, um curta sem falas.
- Movimento em sites e produtos: animação de interface, loops de destaque na home, gráficos interativos (em geral do tipo que anima elementos da página).
Como fazer uma animação em JavaScript com IA
Você não precisa mais escrever o código de desenho por conta própria. O Claude Opus 5.5 consegue planejar um filme como uma grade de batidas e uma lista de planos, escrever o código de desenho no canvas e a trilha em Web Audio, e conferir os próprios quadros numa folha de contato. Há dois jeitos de rodar isso: no Claude Code, com as skills javascript-animation gratuitas e de código aberto, ou no modo Animation do iArt, em que você digita um prompt no navegador e ele faz o filme; para um mais longo, peça para ele continuar. O guia passo a passo, com prompts e filmes reais, é como fazer uma animação em que cada quadro é desenhado em JavaScript.
Faça um filme desenhado em código
Descreva em uma frase. O agente planeja os planos, desenha cada quadro em JavaScript e compõe a música, sem terminal e sem arquivos.
Teste o Animation no iArt →Conceitos relacionados
Termos relacionados: animação por keyframes, motion graphics, vídeo explicativo, tipografia cinética.