O segredo não é pedir a uma IA que “faça um vídeo bonito”. É construir um sistema no qual cada movimento, cada posição e cada frame podem ser descritos, reproduzidos e inspecionados.
O que você vai construir
Imagine um anúncio vertical no qual um título se transforma em uma interface, a interface se abre como um site e o site vira uma oferta. Sem mover keyframes manualmente em um editor tradicional. A animação nasce de código JavaScript executado dentro de um navegador, quadro a quadro, e depois vira MP4 pelo FFmpeg.
Esse é o princípio do MotionJS, sistema desenvolvido para produzir motion design com HTML Canvas, Playwright e FFmpeg. É uma arquitetura de produção por programação, não uma ferramenta mágica que gera qualidade sozinha. A IA entra como assistente de direção criativa, storyboard, implementação e revisão; o motor é responsável por transformar instruções em imagens.
Ao final deste paper você terá o mapa de como preparar o ambiente, escrever uma primeira cena, validar a animação, criar uma timeline e exportar um vídeo.
1. A diferença entre uma animação comum e um motor determinístico
Em um editor convencional, você define keyframes e ajusta curvas. No MotionJS, você define uma função do tempo: f(t) → quadro visual. O instante t = 3.5 segundos deve sempre produzir exatamente a mesma composição.
Isso obriga a tomar decisões importantes: evitar Date.now() como fonte da animação, controlar qualquer aleatoriedade com uma seed fixa, carregar as fontes antes da gravação e calcular o estado de cada elemento sem depender do frame anterior. O benefício é conseguir voltar para qualquer ponto do vídeo, gerar um storyboard automaticamente e corrigir uma cena sem renderizar tudo.
Fluxo: roteiro → cenas JavaScript → Canvas → Chrome Headless → frames → FFmpeg → MP4.
2. Prepare o ambiente
Você precisará de Node.js, Git, um navegador Chromium disponibilizado pelo Playwright e FFmpeg instalado e acessível pelo terminal. Em Windows, confira os comandos no PowerShell; no Linux ou macOS, execute no seu terminal.
node --version
npm --version
git --version
ffmpeg -versionSe o terminal não encontrar ffmpeg, instale-o pelos meios suportados no seu sistema e configure o PATH. Para clonar o projeto de referência, execute:
git clone <URL-DO-SEU-REPOSITORIO-MOTIONJS> javascriptvideos
cd javascriptvideos
pnpm install
npx playwright install chromiumO projeto possui scripts de preview, storyboard, render e demo:
pnpm run preview
pnpm run storyboard
pnpm run renderNo projeto descrito, o preview é aberto em http://localhost:3000, o storyboard produz assets/storyboard/contact-sheet.png e a renderização produz assets/output/video-final.mp4.
3. Entenda a estrutura antes de pedir código à IA
A pasta engine/ guarda a lógica reaproveitável: anim.js para interpolação e easing; safezones.js para áreas seguras; audio.js para áudio; renderer.js para Playwright e FFmpeg. A pasta template/ contém o HTML Canvas e scenes.js, responsável por montar as cenas. storyboard/ e preview/ existem para inspecionar a produção antes do MP4 final.
O erro recorrente é colocar tudo em um único arquivo gigantesco. Uma produtora eficiente separa direção de arte, animação, composição, assets e validação. Isso também ajuda o agente de IA a alterar apenas o que precisa ser corrigido.
4. Sua primeira cena em Canvas
Abaixo está um exemplo autônomo e didático, demonstrando a renderização baseada puramente na variável t:
<canvas id="stage" width="1080" height="1920"></canvas>
<script>
const canvas = document.querySelector('#stage');
const ctx = canvas.getContext('2d');
const clamp = x => Math.max(0, Math.min(1, x));
const easeOutCubic = x => 1 - Math.pow(1 - x, 3);
function render(t) {
const p = easeOutCubic(clamp((t - 0.2) / 0.8));
ctx.clearRect(0, 0, 1080, 1920);
ctx.fillStyle = '#f5f5f7';
ctx.fillRect(0, 0, 1080, 1920);
ctx.save();
ctx.globalAlpha = p;
ctx.translate(90, 970 + (1 - p) * 80);
ctx.fillStyle = '#1d1d1f';
ctx.font = '600 92px Arial';
ctx.fillText('Sua ideia vira vídeo', 0, 0);
ctx.restore();
}
window.render = render;
let started = performance.now();
requestAnimationFrame(function tick(now) {
render((now - started) / 1000);
requestAnimationFrame(tick);
});
</script>Na renderização offline, o Playwright não precisa desse relógio de prévia: ele chama window.render(t) com o tempo exato de cada frame. Esse detalhe é fundamental para a reprodutibilidade.
5. Transforme um roteiro em storyboard técnico
Pedir “faça um vídeo tecnológico” é pouco. O agente precisa receber, por cena: duração, mensagem, composição inicial, elementos, hierarquia, movimento, transição, narração e condição de aprovação.
Considere um anúncio de 15 segundos: 0–3s, a ideia aparece como tipografia gigante; 3–6s, a palavra se transforma em um cartão de produto; 6–10s, o cartão cresce e vira um site; 10–13s, um botão revela o checkout; 13–15s, o CTA permanece estável para leitura. Cada transformação deve preparar a próxima.
6. Use IA como uma equipe de produção
Divida as responsabilidades em papéis: diretor criativo, storyboard artist, motion designer, engenheiro Canvas, especialista de áudio e QA.
Prompt reutilizável:
Atue como diretor de motion design para um vídeo vertical 1080x1920 a 30 FPS.
Use o design system anexado e a arquitetura MotionJS existente.
Crie storyboard por tempo, com texto exato, objetos, bounds,
camadas, transições e easing. Cada cena deve responder:
"O que se transforma em quê e por quê?"
Implemente em JavaScript Canvas com window.render(t) determinístico.
Não use Date.now, aleatoriedade não controlada ou animações
cujo estado dependa dos frames anteriores.
Gere prévia, contact sheet, QA por frame e relatório de falhas
antes de exportar o MP4 final.7. O salto de qualidade: movimento com significado
Uma cena não melhora porque recebeu mais partículas ou brilhos. Motion premium utiliza kinetic typography, match cuts, transformações de forma, parallax controlado e ritmos de aceleração e repouso. Quando a narração fala “criar”, por exemplo, um texto pode se organizar em um documento; ao falar “publicar”, o documento se expande para uma página navegável.
8. A parte que não pode faltar: travas de qualidade
Os erros mais comuns em vídeos criados por agentes são previsíveis: subtítulo fora do card, texto cortado no terminal, checkout sobrepondo o botão, mockup com letras minúsculas, frames pretos e saltos entre transições.
Crie validações de TEXT FIT, BOUNDARIES, OVERLAP, SAFE ZONES, CONTRAST, MOTION e RENDER. Para Reels, proteja aproximadamente 15% do topo, 20% do rodapé e 16% da lateral direita para elementos essenciais.
9. Render, áudio e entrega
O renderer abre o Canvas em Chromium, chama window.render(t) a 30 instantes por segundo e envia os quadros ao FFmpeg. Uma locução opcional pode ser gerada por ElevenLabs ou gravada manualmente. Trilha e efeitos entram na mixagem final.
Checklist de publicação
- [ ] A mensagem é compreensível sem áudio
- [ ] As primeiras três cenas possuem transformação visual real
- [ ] Os textos principais cabem integralmente no quadro
- [ ] Produto e interfaces estão legíveis no celular
- [ ] Não há conflitos com áreas seguras
- [ ] A narração está sincronizada
- [ ] Todos os frames foram validados sem falha crítica
- [ ] O MP4 final foi aberto e conferido