Idioma: Español

Convierte una animación HTML en video

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

O empieza con un ejemplo:

¿El código viene de una IA?

Vista previa

En cuanto pegues el código, la animación se verá aquí.

Deja esta pestaña en primer plano mientras se renderiza.

Descargar
Formato
Proporción
s

Todo ocurre en tu dispositivo. El archivo nunca se sube.

Pide a la IA un HTML listo para exportar

Pégalo después de tu petición o envíalo junto con el código que ya tienes. Así es más probable que se renderice sin problemas.

En tres pasos
  1. 1
    Pega
    Pega el HTML o suelta un archivo .html o .zip. La vista previa arranca al instante.
  2. 2
    Revisa
    Elige la proporción según dónde vayas a usar el video. La duración se detecta en la animación, y puedes cambiarla.
  3. 3
    Exporta
    Elige MP4, GIF, WebM transparente o un fotograma PNG, y descarga el archivo.
Pide a la IA un HTML listo para exportar
Pégalo después de tu petición o envíalo junto con el código que ya tienes. Así es más probable que se renderice sin problemas.
Reescribe esta animación como un único archivo HTML autocontenido que pueda exportar a video con htmlto.video:
- Diséñala para una proporción 16:9. Debe ocupar exactamente la ventana del navegador (100vw por 100vh, sin desplazamiento). Usa vw y vh para todos los tamaños, de modo que se adapte a cualquier resolución.
- Debe empezar sola al cargar la página, sin necesidad de ratón, teclado ni desplazamiento.
- Debe tener una duración fija. Indícala 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 propio HTML. Incrusta las imágenes como SVG en línea o como data URLs. Las fuentes y bibliotecas solo pueden cargarse desde un CDN que permita la carga de origen cruzado, 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
Lo que aún no puede hacer
  • Safari, iPhone y iPad no pueden exportar, aunque la vista previa sí funciona.
  • Se omiten los videos, el audio y los iframes de la página.
  • Faltarán las imágenes y fuentes de servidores que bloquean la lectura de origen cruzado.
  • Las animaciones que esperan un clic, el paso del cursor o el desplazamiento no avanzarán.
  • No se captura el SVG animado con etiquetas SMIL como <animate>.
  • Las escenas WebGL muy pesadas pueden fallar en equipos lentos.
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. Lo aceptan la mayoría de redes sociales, apps de presentaciones y editores de video.
GIF
Para README, documentación, chats y correo. Se repite solo y no necesita reproductor. Funciona mejor si es corto y ligero.
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 momento 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 a MP4 (H.264, hasta 4K a 60 fps), GIF, WebM con fondo transparente o un único fotograma PNG. Renderiza fotograma a fotograma en el navegador: el archivo nunca se sube y la frecuencia de fotogramas es exacta, sea cual sea la velocidad del equipo. No hay registro, ni marca de agua, ni que pagar nada. Cada clip puede durar hasta 120 segundos (30 segundos en GIF). Funciona en Chrome, Edge y Firefox de escritorio, y en Chrome para Android. En Safari, iPhone y iPad no se puede exportar, aunque la vista previa sí funciona. No captura videos incrustados, iframes ni imágenes y fuentes de servidores que bloquean el acceso de origen cruzado.
Preguntas frecuentes
¿Cómo convierto a MP4 una animación HTML de ChatGPT o Claude?
Copia el HTML que te dio el asistente, pégalo en el cuadro de arriba, revisa la vista previa y pulsa Exportar. El MP4 se descarga al terminar el renderizado. Con una animación de 10 segundos, suele tardar menos de un minuto.
¿Mi archivo se sube a algún servidor?
No. El video se renderiza y se codifica en tu propio dispositivo. Ni tu HTML ni el archivo final 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. Cada 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 el equipo está ocupado, muestra el cursor y sale del tamaño de tu ventana. Aquí cada fotograma se dibuja por separado, con el tamaño y la frecuencia de fotogramas exactos que elijas.
¿Por qué no funciona en Safari ni en mi iPhone?
Safari no ofrece las funciones del navegador que necesita esta herramienta para capturar los fotogramas del HTML renderizado. Abre el mismo enlace en Chrome, Edge o Firefox de escritorio.
¿Por qué falta una imagen o una fuente en mi video?
Ese 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 la conversión?
Depende del equipo 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. En 4K o con WebGL pesado, tarda más.
¿Puedo exportar un video con fondo transparente?
Sí. Elige WebM (transparente) y no definas ningún fondo para la página. El archivo conserva el canal alfa en los editores compatibles con WebM con alfa.