Sua IA escreveu uma animação. Transforme-a em vídeo.

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 seu.

Ou comece com um exemplo:

Vai pedir o código a uma IA?

Prévia

Sua animação toca aqui assim que você colar o código.

Mantenha esta aba em primeiro plano durante a renderização.

Baixar
Formato
Proporção
s

Roda no seu dispositivo. Seu arquivo nunca é enviado.

Faça a IA escrever o código pronto para exportar

Cole isto depois do seu pedido, ou envie junto com o código que você já tem. O resultado vai sair certo na primeira tentativa.

Do chat ao vídeo
  1. 1
    Peça um único arquivo HTML
    Diga ao assistente o que animar e peça um único arquivo HTML. Inclua o prompt abaixo para que o resultado saia 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 o assistente mostrar uma prévia ao vivo, mude antes para a visualização de código.
  3. 3
    Cole e exporte
    Cole no topo desta página, escolha a proporção da sua plataforma (9:16 para Reels, Shorts e TikTok, 16:9 para YouTube e apresentações) e exporte.
Faça a IA escrever o código pronto para exportar
Cole isto depois do seu pedido, ou envie junto com o código que você já tem. O resultado vai sair certo na primeira tentativa.
Reescreva esta animação como um único arquivo HTML autocontido que eu possa exportar para vídeo com o htmlto.video:
- Projete para um quadro 16:9. Ela deve preencher exatamente a janela do navegador (100vw por 100vh, sem rolagem). Defina todos os tamanhos em vw e vh para que se adapte a qualquer resolução.
- Ela começa sozinha quando a página carrega e não precisa de mouse, teclado nem rolagem.
- Ela tem duração fixa. Informe a duração em um comentário na primeira linha, por exemplo <!-- 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.
- Coloque todo o CSS e o JavaScript dentro do arquivo. Incorpore as imagens como SVG inline ou data URLs. Fontes e bibliotecas só podem vir de um CDN que permita carregamento entre origens, como Google Fonts, cdnjs ou jsDelivr.
- Responda com o HTML completo em um único bloco de código.
Por que não gravar a tela ou usar a linha de comando?
Gravações de tela engasgam, 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 geração quadro a quadro sem instalar nada.
O que dá para converter
  • 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
  • A Web Animations API e requestAnimationFrame
O que ainda não dá para fazer
  • Safari, iPhone e iPad não conseguem exportar. A prévia funciona neles.
  • Vídeos, áudio e iframes dentro da página ficam de fora.
  • Imagens e fontes de servidores que bloqueiam a leitura entre origens não vão aparecer.
  • Animações que esperam um clique, o cursor por cima ou a rolagem não avançam.
  • SVG animado com tags SMIL, como <animate>, não é capturado.
  • Cenas WebGL muito pesadas podem falhar em computadores mais lentos.