Idioma: Português (Brasil)

A IA criou uma animação HTML? Transforme em vídeo MP4

ChatGPT, Claude e Gemini entregam código, mas redes sociais, apresentações e editores pedem um arquivo de vídeo. Cole o código aqui e baixe o vídeo.

Ou comece por um exemplo:

Vai pedir o código para uma IA?

Prévia

A animação aparece aqui assim que você colar o código.

Deixe esta aba em primeiro plano até terminar.

Baixar
Formato
Proporção
s

Tudo roda no seu dispositivo. O arquivo nunca é enviado.

Peça à IA um HTML pronto para exportar

Cole isto depois do seu pedido ou envie junto com o código que você já tem. Assim o resultado tem a maior chance de sair limpo.

Do chat ao vídeo
  1. 1
    Peça um único arquivo HTML
    Diga ao assistente o que você quer animar e peça tudo num único arquivo HTML. Inclua o prompt abaixo para o resultado já sair pronto para exportar.
  2. 2
    Copie o código
    No ChatGPT, Claude ou Gemini, use o botão de copiar do bloco de código. Se aparecer uma prévia ao vivo, troque antes para a visualização do código.
  3. 3
    Cole e exporte
    Cole no topo desta página, escolha a proporção da plataforma (9:16 para Reels, Shorts e TikTok; 16:9 para YouTube e apresentações) e exporte.
Peça à IA um HTML pronto para exportar
Cole isto depois do seu pedido ou envie junto com o código que você já tem. Assim o resultado tem a maior chance de sair limpo.
Reescreva esta animação como um único arquivo HTML autocontido, que eu possa exportar para vídeo no htmlto.video:
- Crie o layout para um quadro 16:9. A animação deve ocupar exatamente a janela do navegador (100vw por 100vh, sem rolagem). Use vw e vh em todos os tamanhos para que ela se adapte a qualquer resolução.
- Ela começa sozinha quando a página carrega, sem precisar de mouse, teclado nem rolagem.
- Ela tem duração fixa. Informe a duração num comentário na primeira linha, assim: <!-- duration: 8s -->.
- Anime com animações CSS, a Web Animations API, GSAP ou requestAnimationFrame usando o argumento de timestamp. Não use vídeo, áudio nem iframes.
- Deixe todo o CSS e o JavaScript inline. Incorpore as imagens como SVG inline ou data URLs. Fontes e bibliotecas só podem vir de um CDN que permita carregamento entre origens (cross-origin), como Google Fonts, cdnjs ou jsDelivr.
- Responda com o HTML completo num único bloco de código.
Por que não gravar a tela ou usar a linha de comando?
Gravações de tela travam, mostram o cursor e saem no tamanho errado. Ferramentas de linha de comando dão resultado exato, mas exigem Node, um navegador headless e FFmpeg instalados. Esta página faz a mesma renderização quadro a quadro, sem instalar nada.
O que dá para renderizar
  • Animações e transições CSS
  • GSAP, anime.js, Motion e outras bibliotecas JavaScript
  • Canvas 2D
  • SVG animado com CSS ou JavaScript
  • WebGL e Three.js
  • Web Animations API e requestAnimationFrame
O que ainda não dá para fazer
  • Safari, iPhone e iPad não exportam. A prévia funciona normalmente neles.
  • Vídeos, áudio e iframes dentro da página ficam de fora.
  • Imagens e fontes de servidores que bloqueiam a leitura cross-origin ficam faltando.
  • Animações que dependem de clique, hover ou rolagem não saem do lugar.
  • SVG animado com tags SMIL, como <animate>, não é capturado.
  • Cenas WebGL muito pesadas podem falhar em computadores mais lentos.