Idioma: Português (Brasil)

Transforme sua animação HTML em GIF

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

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.
Dicas para um bom GIF
Quanto mais curto, melhor
O GIF fica pesado rápido. De três a oito segundos em 480p costuma ser o ideal para um README ou uma mensagem no chat.
Loop sem emenda
Animações em loop são cortadas em exatamente um ciclo, então o GIF se repete sem pulo.
Cores chapadas ficam melhores
O GIF tem 256 cores por quadro. Formas chapadas e texto ficam nítidos; degradês suaves e fotos ficam com faixas visíveis.
Precisa de mais qualidade?
Exporte em MP4 a partir do mesmo código. Onde vídeo é aceito, ele fica mais nítido e bem mais leve.
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.