Antes de começar
- Node.js
- FFmpeg no PATH
- Pasta de trabalho nova
Defina os três momentos do vídeo
Use um vídeo de seis segundos para o primeiro teste: título nos segundos 0–2, demonstração entre 2–4 e convite final entre 4–6. Escreva a frase de cada momento. O exemplo para download usa formas e texto originais, sem buscar imagens ou depender de um serviço de geração.
Prepare o projeto
Baixe os dois arquivos indicados nas fontes: cena.html e render.mjs. Coloque os dois na mesma pasta. Instale Playwright e seu navegador com os comandos abaixo. Confira também ffmpeg -version no terminal antes de iniciar a captura.
npm init -y
npm install playwright
npx playwright install chromium
ffmpeg -versionAltere o visual pelo tempo do vídeo
Abra cena.html e edite os textos, cores e a função draw(t). O valor t representa segundos; uma chamada com o mesmo t deve produzir o mesmo quadro. Essa regra evita capturas inconsistentes causadas por animações que dependem do relógio ou de valores aleatórios. Preserve espaço nas bordas para a interface do Instagram.
Capture e monte o MP4
O renderizador abre a cena local, chama draw(t) em intervalos de 1/30 de segundo e salva 180 PNGs. O FFmpeg recebe essa sequência na mesma taxa de quadros. Rode os comandos na pasta do projeto. O exemplo exporta 540×960 para acelerar o primeiro teste; aumente canvas e viewport juntos quando for produzir em 1080×1920.
node render.mjs
ffmpeg -y -framerate 30 -i frames/frame-%04d.png -c:v libx264 -pix_fmt yuv420p -movflags +faststart video.mp4Confira os quadros antes de publicar
Monte uma folha de revisão com o comando abaixo. Verifique abertura, transições e encerramento, depois assista ao MP4 no celular. Texto que cabe na captura pode continuar difícil de ler em movimento. Ajuste tamanho, contraste e tempo de permanência, renderizando de novo após cada mudança.
ffmpeg -y -i video.mp4 -vf "fps=1,scale=180:-1,tile=3x2" -frames:v 1 revisao.jpgAdapte para um Reel seu
Quando o exemplo funcionar, troque o assunto e mantenha um único objetivo. Peça ao agente: crie uma versão de 15 segundos sobre [tema], mostre primeiro o storyboard, preserve a captura determinística e revise uma folha de quadros antes de entregar. Guarde cena, renderizador e MP4 para conseguir editar o vídeo depois.
O que você terá ao final
Uma animação vertical reproduzível, seu MP4 e uma folha de revisão.
Vale conferir
- Renderizar centenas de PNGs usa disco e tempo de processamento.
- O exemplo não inclui áudio; use apenas faixas e vozes que você pode publicar.
- Exemplo de seis segundos testado: 180 quadros, MP4 H.264 e folha de revisão. Adaptações com geração de código precisam de nova conferência.