Idioma: Português (Brasil)

Transforme sua animação HTML em vídeo MP4

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

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.

Três passos e pronto
  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 pensando em onde o vídeo vai ser usado. A duração vem da própria animação, mas dá para mudar.
  3. 3
    Exporte
    Escolha MP4, GIF, WebM transparente ou um quadro PNG e baixe o arquivo.
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.
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.
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. Funciona na maioria das redes sociais, dos apps de apresentação e dos editores de vídeo.
GIF
Para README, documentação, chat e e-mail. Roda em loop sozinho e não precisa de player. Ideal se for curto e pequeno.
WebM transparente
Para sobrepor no editor: títulos, tarjas de nome, stickers. O fundo da página fica transparente.
Quadro PNG
Uma imagem estática do momento que você escolher. Para miniaturas e capas.
Em resumo
O htmlto.video é uma ferramenta online e gratuita que converte uma animação HTML em arquivo de vídeo. Ele aceita HTML colado, arquivos .html e arquivos .zip, e exporta em MP4 (H.264, até 4K a 60 fps), GIF, WebM com fundo transparente ou um único quadro PNG. A renderização é feita quadro a quadro no seu navegador: o arquivo nunca é enviado, e a taxa de quadros sai exata, seja qual for a velocidade do computador. Sem cadastro, sem marca d’água e sem custo. Cada 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 dá para exportar no Safari, no iPhone nem no iPad, mas a prévia funciona. A ferramenta não captura vídeos incorporados, iframes nem imagens e fontes de servidores que bloqueiam o acesso cross-origin.
Perguntas frequentes
Como transformar uma animação HTML do ChatGPT ou do Claude em vídeo MP4?
Copie o HTML que o assistente escreveu, cole na caixa no topo desta página, confira a prévia e clique em Exportar. O download do MP4 começa quando a renderização termina. Uma animação de 10 segundos costuma levar menos de um minuto.
Meu arquivo é enviado para algum lugar?
Não. A página renderiza e codifica o vídeo no seu próprio dispositivo. O 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 precisar de conta. Cada clipe pode ter até 120 segundos, ou 30 segundos no caso de GIF.
Por que usar isso em vez de gravar a tela?
A gravação de tela perde quadros quando o computador está sobrecarregado, mostra o cursor e sai do tamanho da 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 iPhone?
O Safari não oferece os recursos de navegador de que o exportador precisa para capturar os quadros do HTML renderizado. Abra o mesmo link no Chrome, Edge ou Firefox em um computador.
Por que uma imagem ou fonte sumiu do meu vídeo?
O arquivo está num servidor que não deixa outros sites lerem o conteúdo. Incorpore a imagem ao HTML como data URL ou use um serviço de fontes que permita isso, como o Google Fonts.
Quanto tempo demora a renderização?
Depende do computador e da página. Um clipe típico de 10 segundos em 1080p a 60 quadros por segundo leva de 20 a 40 segundos. Em 4K ou com WebGL pesado, demora mais.
Dá para exportar vídeo com fundo transparente?
Dá. Escolha WebM (transparente) e não defina uma cor de fundo na página. O arquivo mantém o canal alfa nos editores compatíveis com WebM com alfa.