Transforme uma animação HTML em GIF

Para README, pull request, documentação, chat e qualquer lugar onde não seja possível reproduzir vídeo. Cole o código, escolha o tamanho e baixe o GIF.

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.
Como conseguir um bom GIF
Prefira GIFs curtos
Um GIF cresce rápido. De três a oito segundos em 480p costuma ser o ideal para um README ou uma mensagem de chat.
O loop fecha certo
Uma animação em loop é cortada em exatamente um ciclo, então o GIF repete sem salto.
Cores chapadas funcionam melhor
Um GIF guarda 256 cores por quadro. Formas chapadas e texto ficam nítidos; degradês suaves e fotos mostram faixas.
Prefere qualidade?
Exporte MP4 a partir do mesmo código. Fica mais nítido e bem menor, onde vídeo for aceito.
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.