Convierte una animación HTML en video

Pega el código o suelta un archivo. Se genera fotograma a fotograma en tu navegador, así que no se sube nada. Sin cuenta, sin marca de agua y clips de hasta 2 minutos.

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.
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.
Qué formato elegir
MP4
Para redes sociales, presentaciones y editores de video. H.264 a 720p, 1080p o 4K, a 24, 30 o 60 fotogramas por segundo. Se reproduce en todas partes.
GIF
Para un README, documentación, chats y correo. Se repite solo y no necesita reproductor. Mejor corto y pequeño.
WebM transparente
Para superponer en un editor: títulos, tercios inferiores, stickers. El fondo de la página queda transparente.
Fotograma PNG
Una imagen fija del instante que elijas. Para miniaturas y portadas.
En pocas palabras
htmlto.video es una herramienta online gratuita que convierte una animación HTML en un archivo de video. Acepta HTML pegado, archivos .html y archivos .zip, y exporta MP4 (H.264, hasta 4K a 60 fps), GIF, WebM con fondo transparente o un único fotograma PNG. La generación es fotograma a fotograma y ocurre en el navegador del visitante: el archivo nunca se sube, y la velocidad de fotogramas es exacta sin importar lo rápida que sea la computadora. No hay registro, marca de agua ni costo. Un clip puede durar hasta 120 segundos (30 segundos en GIF). Funciona en Chrome, Edge y Firefox en computadoras y en Chrome en Android. No funciona en Safari ni en iPhone y iPad, y no captura videos incrustados, iframes, ni imágenes y fuentes de servidores que bloquean el acceso entre orígenes.
Preguntas
¿Cómo convierto en MP4 una animación HTML de ChatGPT o Claude?
Copia el HTML que escribió el asistente, pégalo en el cuadro al inicio de esta página, revisa la vista previa y pulsa Exportar. El MP4 se descarga cuando termina la generación. Para una animación de 10 segundos suele tardar menos de un minuto.
¿Mi archivo se sube a algún sitio?
No. La página genera y codifica el video en tu propio dispositivo. Tu HTML y el archivo final nunca llegan a nuestros servidores.
¿De verdad es gratis? ¿Hay marca de agua o límite de duración?
Es gratis, sin marca de agua y sin cuenta. Un clip puede durar hasta 120 segundos, o 30 segundos si es un GIF.
¿Por qué es mejor que grabar la pantalla?
Una grabación de pantalla pierde fotogramas cuando la computadora está ocupada, muestra el cursor y sale con el tamaño de tu ventana. Aquí cada fotograma se dibuja por separado, con el tamaño y la frecuencia de fotogramas exactos que elegiste.
¿Por qué no funciona en Safari ni en mi iPhone?
Safari no permite que una página lea una imagen del contenido HTML, y este método depende de eso. Abre el mismo enlace en Chrome, Edge o Firefox en una computadora.
Falta una imagen o una fuente en mi video. ¿Por qué?
El archivo está en un servidor que no permite que otros sitios web lo lean. Incrusta la imagen en el HTML como data URL, o usa un servicio de fuentes que lo permita, como Google Fonts.
¿Cuánto tarda en generarse?
Depende de tu computadora y de la página. Un clip típico de 10 segundos a 1080p y 60 fotogramas por segundo tarda entre 20 y 40 segundos. El 4K y el WebGL pesado tardan más.
¿Puedo exportar un video con fondo transparente?
Sí. Elige WebM (transparente) y deja el fondo de la página sin definir. El archivo conserva su canal alfa en los editores que admiten WebM con alfa.