Transforme uma animação HTML em vídeo

Cole o código ou solte um arquivo. O vídeo é gerado quadro a quadro no seu navegador, então nada é enviado. Sem conta, sem marca d’água e clipes de até 2 minutos.

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.

Três passos
  1. 1
    Cole
    Cole o HTML, ou solte um arquivo .html ou .zip. A prévia começa na hora.
  2. 2
    Confira
    Escolha a proporção de acordo com o destino do vídeo. A duração é lida da animação, e você pode alterá-la.
  3. 3
    Exporte
    Escolha MP4, GIF, WebM transparente ou um quadro PNG e baixe o arquivo.
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.
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.
Qual formato escolher
MP4
Para redes sociais, apresentações e editores de vídeo. H.264 em 720p, 1080p ou 4K, a 24, 30 ou 60 quadros por segundo. Toca em qualquer lugar.
GIF
Para README, documentação, chat e e-mail. Repete sozinho e não precisa de player. Melhor curto e pequeno.
WebM transparente
Para sobrepor em um editor: títulos, terços inferiores, stickers. O fundo da página fica transparente.
Quadro PNG
Uma imagem parada do instante que você escolher. Para miniaturas e capas.
Em resumo
O htmlto.video é uma ferramenta online gratuita que converte uma animação HTML em um arquivo de vídeo. Aceita HTML colado, arquivos .html e arquivos .zip, e exporta MP4 (H.264, até 4K a 60 fps), GIF, WebM com fundo transparente ou um único quadro PNG. A geração é quadro a quadro e acontece no navegador do visitante: o arquivo nunca é enviado, e a taxa de quadros é exata, não importa a velocidade do computador. Não há cadastro, marca d’água nem custo. Um clipe pode ter até 120 segundos (30 segundos em GIF). Funciona no Chrome, Edge e Firefox no computador e no Chrome no Android. Não funciona no Safari, no iPhone nem no iPad, e não captura vídeos incorporados, iframes, nem imagens e fontes de servidores que bloqueiam o acesso entre origens.
Perguntas
Como transformo em MP4 uma animação HTML do ChatGPT ou do Claude?
Copie o HTML que o assistente escreveu, cole na caixa no topo desta página, confira a prévia e clique em Exportar. O MP4 é baixado quando a geração termina. Para uma animação de 10 segundos, isso costuma levar menos de um minuto.
Meu arquivo é enviado para algum lugar?
Não. A página gera e codifica o vídeo no seu próprio dispositivo. Seu HTML e o arquivo final nunca chegam aos nossos servidores.
É grátis mesmo? Tem marca d’água ou limite de tempo?
É grátis, sem marca d’água e sem conta. Um clipe pode ter até 120 segundos, ou 30 segundos no caso de GIF.
Por que é melhor do que gravar a tela?
Uma gravação de tela perde quadros quando o computador está ocupado, mostra o cursor e sai do tamanho da sua janela. Aqui cada quadro é desenhado separadamente, no tamanho e na taxa de quadros exatos que você escolheu.
Por que não funciona no Safari nem no meu iPhone?
O Safari não permite que uma página obtenha uma imagem do conteúdo HTML já renderizado, e este método depende disso. Abra o mesmo link no Chrome, Edge ou Firefox em um computador.
Uma imagem ou fonte sumiu do meu vídeo. Por quê?
O arquivo está em um servidor que não permite a leitura por outros sites. Incorpore a imagem no HTML como data URL, ou use um serviço de fontes que permita isso, como o Google Fonts.
Quanto tempo leva para gerar o vídeo?
Depende do seu computador e da página. Um clipe típico de 10 segundos em 1080p e 60 quadros por segundo leva de 20 a 40 segundos. 4K e WebGL pesado demoram mais.
Posso exportar um vídeo com fundo transparente?
Sim. Escolha WebM (transparente) e deixe o fundo da página sem definição. O arquivo mantém o canal alfa nos editores que aceitam WebM com alfa.