Convierte una animación HTML en GIF

Para un README, un pull request, la documentación, un chat o cualquier sitio donde no se pueda reproducir un video. Pega el código, elige el tamaño y descarga el GIF.

O empieza con un ejemplo:

¿Vas a pedir el código a una IA?

Vista previa

Tu animación se reproduce aquí en cuanto la pegues.

Mantén esta pestaña en primer plano mientras se genera.

Descargar
Formato
Proporción
s

Funciona en tu dispositivo. Tu archivo nunca se sube.

Haz que la IA lo escriba listo para exportar

Pega esto después de tu petición, o envíalo junto con el código que ya tienes. El resultado se generará bien al primer intento.

Tres pasos
  1. 1
    Pega
    Pega el HTML, o suelta un archivo .html o .zip. La vista previa empieza enseguida.
  2. 2
    Revisa
    Elige la proporción según dónde lo vas a publicar. La duración se lee de la animación y puedes cambiarla.
  3. 3
    Exporta
    Elige MP4, GIF, WebM transparente o un fotograma PNG y descarga el archivo.
Haz que la IA lo escriba listo para exportar
Pega esto después de tu petición, o envíalo junto con el código que ya tienes. El resultado se generará bien al primer intento.
Reescribe esta animación como un único archivo HTML autocontenido que pueda exportar a video con htmlto.video:
- Diséñala para un encuadre 16:9. Debe ocupar exactamente la ventana del navegador (100vw por 100vh, sin desplazamiento). Define todos los tamaños en vw y vh para que se adapte a cualquier resolución.
- Empieza sola al cargar la página y no necesita ratón, teclado ni desplazamiento.
- Tiene una duración fija. Indica la duración en un comentario en la primera línea, por ejemplo <!-- duration: 8s -->.
- Anima con animaciones CSS, la Web Animations API, GSAP o requestAnimationFrame usando su argumento de marca de tiempo. No uses video, audio ni iframes.
- Pon todo el CSS y el JavaScript dentro del archivo. Incrusta las imágenes como SVG en línea o como data URLs. Las fuentes y bibliotecas solo pueden venir de un CDN que permita la carga entre orígenes, como Google Fonts, cdnjs o jsDelivr.
- Responde con el HTML completo en un solo bloque de código.
Cómo conseguir un buen GIF
Que sea corto
Un GIF crece rápido. De tres a ocho segundos a 480p suele ser lo adecuado para un README o un mensaje de chat.
Los bucles encajan
Una animación en bucle se corta exactamente en un ciclo, así que el GIF se repite sin saltos.
Los colores planos funcionan mejor
Un GIF admite 256 colores por fotograma. Las formas planas y el texto quedan nítidos; los degradados suaves y las fotos muestran bandas.
¿Prefieres calidad?
Exporta MP4 con el mismo código. Es más nítido y ocupa mucho menos espacio en cualquier lugar donde se admita video.
Qué puede renderizar
  • Animaciones y transiciones CSS
  • GSAP, anime.js, Motion y otras bibliotecas de JavaScript
  • Canvas 2D
  • SVG animado con CSS o JavaScript
  • WebGL y Three.js
  • La Web Animations API y requestAnimationFrame
Qué no puede hacer todavía
  • Safari, iPhone y iPad no pueden exportar. La vista previa sí funciona.
  • Los videos, el audio y los iframes que haya dentro de la página se omiten.
  • Las imágenes y fuentes de servidores que bloquean la lectura entre orígenes no aparecerán.
  • Las animaciones que esperan un clic, que pases el cursor por encima o que te desplaces no avanzarán.
  • El SVG animado con etiquetas SMIL como <animate> no se captura.
  • Las escenas WebGL muy pesadas pueden fallar en computadoras lentas.