Convertir HTML a vídeo, fotograma a fotograma en tu navegador
Pega el HTML que escribió Claude, ChatGPT, Gemini o tú, o suelta un archivo .html o .zip, y guárdalo como MP4, GIF o WebM transparente. Cada fotograma se dibuja en tu ordenador: el vídeo sale fluido y no se sube nada.
- ✓Gratis, sin marca de agua ni registro
- ✓Nada sale de tu navegador
- ✓Fotograma exacto, hasta 4K a 60 fps
- ✓MP4, GIF, WebM y PNG
MP4 de 1920×1080, dibujado fotograma a fotograma en tu ordenador: fluido sea cual sea su velocidad, y no se sube nada.
O empieza con un ejemplo
Cada uno es un único archivo HTML. Cárgalo, cámbialo y expórtalo.
Cómo funciona
Tres pasos, todo en tu navegador
La herramienta toma el control del reloj de la página, lo avanza fotograma a fotograma y dibuja cada uno, así que un portátil lento crea el mismo vídeo que uno rápido.
- 01
Pega el código o suelta un archivo
Una página completa con su CSS y JavaScript, un archivo .html o un .zip exportado con sus imágenes y fuentes. Las librerías de un CDN cargan como siempre.
- 02
Elige formato y tamaño
MP4, GIF, WebM o un fotograma PNG; 16:9, 9:16 o 1:1; de 720p a 4K a 24, 30 o 60 fps. Si las animaciones tienen final, la duración se ajusta sola.
- 03
Renderiza y descarga
Cada fotograma se dibuja y codifica en tu ordenador, y el archivo queda listo para descargar. Sin pedirte compartir pantalla, sin subir nada.
Qué funciona
Todo lo que el navegador anima
Si se mueve en una pestaña del navegador, puede convertirse en vídeo: la herramienta controla el tiempo de CSS, la Web Animations API, los temporizadores y requestAnimationFrame, que es la base de todas las librerías de animación.
Animaciones y transiciones CSS
Keyframes, transiciones, @property y filtros, con el tiempo exacto del código.
GSAP y anime.js
Timelines y tweens desde un CDN; la duración de un timeline de GSAP se detecta sola.
Animaciones SVG
Dibujo de líneas con stroke-dashoffset, morphs y degradados animados.
Dibujo en Canvas
Dibujo en canvas 2D y sistemas de partículas movidos por requestAnimationFrame.
Three.js y WebGL
Escenas 3D y shaders, fotograma a fotograma, a cualquier tamaño.
p5.js y código creativo
Bocetos generativos y creative coding, exportados sin perder fotogramas.
Tailwind y maquetas de interfaz
Heros de producto y pantallas de apps animadas con clases, temporizadores y la Web Animations API.
Páginas hechas con IA
Animaciones, explicaciones y gráficos que Claude, ChatGPT o Gemini escribieron en un solo archivo HTML.
Formatos
Todos los formatos con un solo pegado
Elige el archivo según dónde vaya a usarse. La misma página se renderiza en cualquiera de ellos y en cualquiera de las tres proporciones.
MP4
H.264 · 720p, 1080p o 4K · 24/30/60 fps
Para redes sociales, presentaciones y editores de vídeo. Se reproduce en todas partes.
GIF animado
De 360p a 720p · 10/15/25 fps · en bucle
Para un README, un mensaje de Slack, un email o documentación.
WebM transparente
VP9 con canal alfa · de 720p a 4K
Sin el fondo de la página: una capa superpuesta para Premiere, DaVinci Resolve, Final Cut o CapCut.
Imagen PNG
1080p o 4K · cualquier instante · transparente
Un fotograma como imagen fija: un póster, una miniatura o una imagen para diapositivas.
Usos
A dónde llevan la gente sus animaciones
Redes
Publicaciones y stories
16:9 para X y LinkedIn, 9:16 para TikTok, Reels y Shorts, 1:1 para el feed. Las plataformas aceptan vídeo, no HTML.
Presentaciones
PowerPoint, Keynote y Google Slides
Las presentaciones reproducen un MP4 o un GIF; una animación HTML, no.
Edición
Títulos y overlays en un editor de vídeo
Un rótulo inferior o una animación de logo en WebM transparente, encima del metraje.
Documentación
Archivos README y documentación
Un GIF de un componente o un gráfico, justo donde la gente lee.
Portafolio
Dribbble, Behance y casos de estudio
Tu trabajo de motion de CodePen o de tu propio proyecto, como un vídeo limpio y nítido.
Producto
Lanzamientos y demos
El hero de un producto o una pantalla de app animada en HTML, como clip para el post de lanzamiento.
Desde un chat de IA
Convierte en vídeo una animación de Claude, ChatGPT o Gemini
- 01
Pide un solo archivo HTML
Pide “un único archivo HTML autónomo con el CSS y el JavaScript dentro”, que ocupe toda la ventana. Indica la duración que quieres para que la animación tenga final.
- 02
Copia el código o descarga el archivo
Copia la página entera del chat o descarga el archivo .html. Si tu herramienta exporta una carpeta o un .zip (como Claude Design), quédate con el .zip.
- 03
Pégalo o suéltalo aquí y renderiza
La vista previa lo reproduce; elige MP4, GIF o WebM y renderiza. Para cambiar algo, pídeselo a la IA, pega la nueva versión y vuelve a renderizar.
Por qué fotograma a fotograma
Fluido en cualquier ordenador, y privado
Una grabación de pantalla guarda lo que tu ordenador logró mostrar, fotogramas perdidos incluidos. Aquí el tiempo de la página se detiene hasta que cada fotograma está dibujado.
Fotograma exacto
Cada fotograma se dibuja en su propio instante, así que 60 fps son 60 fotogramas distintos por segundo, también en un portátil lento.
Nada se sube
La página se ejecuta en un marco aislado de tu navegador y el archivo se codifica ahí. Tu código nunca llega a un servidor.
Gratis y sin marca de agua
Sin cuenta, sin créditos, sin logo en tu vídeo.
Formas de convertir HTML en vídeo
| Esta herramienta | Conversores online | Renderizadores de línea de comandos | Grabación de pantalla | |
|---|---|---|---|---|
| Se sube tu archivo | No | Sí | No | No |
| Cuenta o marca de agua | Ninguna | A menudo, en planes gratis | Ninguna | Ninguna |
| Fotograma exacto | Sí | Normalmente | Sí | No: guarda los fotogramas perdidos |
| Duración | Hasta 5 minutos | A menudo limitada en planes gratis | Cualquiera | Cualquiera |
| Fondo transparente | WebM y PNG | A veces, de pago | Sí | No |
| Instalación | Ninguna: un navegador | Ninguna | Node, Chrome y FFmpeg | Una app de grabación |
¿Tienes el enlace de una página?
Convierte una página web pública en un vídeo de scroll fluido, para una publicación de lanzamiento o un portafolio.
Más allá de esta herramienta
Una animación es el comienzo. Una skill hace el vídeo entero.
Esta herramienta convierte en vídeo el HTML que ya tienes. Una Motion Skill empieza un paso antes: en Claude Code, Codex o Cursor, tu agente lee tu producto o tus notas, planifica los planos, escribe cada escena, pone la música y renderiza el MP4 terminado.
- ✓A partir de tu propio material, no de un prompt en blanco
- ✓Varias escenas, montadas con música
- ✓Renderizado en tu ordenador y tuyo para usarlo
Skills que siguen desde aquí
Cada una hace un tipo de vídeo distinto. La primera es la más cercana a esta página.
¿Haces más de un tipo de vídeo?
Empieza gratis con Motion Director. Una skill cuesta $4.90; un plan desbloquea todas las skills y las nuevas a medida que llegan.
Mensual
$9.90/ mes
- ✓Todas las skills de vídeo completo, estilos incluidos
- ✓Nuevas skills en cuanto salen
- ✓Actualizaciones de las skills existentes
- ✓Uso comercial de lo que renderizas
Anual
Ahorra 34%$79/ año
- ✓Todas las skills de vídeo completo, estilos incluidos
- ✓Nuevas skills en cuanto salen
- ✓Actualizaciones de las skills existentes
- ✓Uso comercial de lo que renderizas
Fundador de por vida
Oferta fundador$169pago único
- ✓Todas las skills de vídeo completo, estilos incluidos
- ✓Nuevas skills en cuanto salen
- ✓Actualizaciones de las skills existentes
- ✓Uso comercial de lo que renderizas
- ✓Un solo pago, sin renovaciones
Obtener Motion Director (gratis) →Una sola skill $4.90 · Elige una skill →
Preguntas
¿Se sube mi HTML?
No. La página se ejecuta en un marco aislado de tu navegador, separado de este sitio, y el vídeo se codifica en tu ordenador. No nos llega nada.
¿Qué animaciones funcionan?
Todo lo que mueve el reloj de la página: animaciones y transiciones CSS, la Web Animations API, GSAP, anime.js, SVG, Canvas, Three.js y WebGL, p5.js y código con temporizadores o requestAnimationFrame. No se ven los vídeos incrustados en la página, los iframes ni las imágenes de sitios que bloquean la lectura desde otros sitios; para eso, usa “Grabar en tiempo real”.
¿En qué se diferencia de grabar la pantalla?
Una grabación reproduce la página en tiempo real y guarda lo que el ordenador logró mostrar, así que una página pesada da tirones. Esta herramienta detiene el reloj de la página, lo lleva al instante de cada fotograma y lo dibuja: el vídeo sale fluido sea cual sea la velocidad del ordenador, y siempre con la duración exacta.
¿Cuánto puede durar y qué tamaño puede tener el vídeo?
Hasta 5 minutos. MP4 y WebM a 720p, 1080p o 4K y 24, 30 o 60 fps; GIF de 360p a 720p a 10, 15 o 25 fps. Cuanto más largo y grande, más tiempo y memoria.
¿Cómo convierto en vídeo una animación de Claude o ChatGPT?
Pide un único archivo HTML autónomo, cópialo (o descárgalo), pégalo aquí y renderiza. Si la herramienta que usaste exporta un .zip, como Claude Design, suelta el .zip: sus imágenes, scripts y fuentes se leen de ahí.
¿Puedo exportar con fondo transparente?
Sí, en WebM (VP9 con canal alfa) o PNG: marca “Fondo transparente” y el fondo propio de la página se queda fuera. El MP4 no admite transparencia. Editores como Premiere, DaVinci Resolve, Final Cut y CapCut aceptan WebM transparente.
¿En qué navegadores funciona?
Chrome, Edge y Firefox en ordenador, y Chrome en Android. Safari, y por tanto cualquier navegador en iPhone y iPad, no permite dibujar una página de esta forma; ábrela en un ordenador.
¿El GIF se repite en bucle?
Sí, los GIF se repiten sin fin. Para un bucle perfecto, ajusta la duración a un ciclo completo de la animación; cuando la página está en bucle, la duración que se muestra es ese ciclo.
¿El vídeo tiene sonido?
No, los archivos no tienen audio. Añade música en tu editor, o crea un vídeo completo con música con Motion Director, una skill gratuita para Claude Code, Codex o Cursor.
Un fotograma se ve distinto de la página. ¿Por qué?
Algunos efectos aún no se pueden dibujar fotograma a fotograma, como capas de posición fija fusionadas sobre la página. Prueba “Grabar en tiempo real”, que captura la pestaña mientras se reproduce, en Chrome o Edge en un ordenador.
¿Es gratis?
Sí: sin registro, sin marca de agua y sin límite de vídeos.
Siguiente
Ir más allá
¿Aún no tienes animación? Empieza con un prompt
Copia un prompt de animación, envíaselo a Claude o ChatGPT y pega aquí el HTML que te devuelva.
Ver prompts de animación →¿Tienes capturas en vez de código?
El generador de vídeo de mockup 3D coloca capturas en móviles, portátiles y tarjetas en movimiento, y exporta un vídeo en bucle.
Abrir la herramienta de mockups →Pega tu HTML y renderízalo
Gratis, en tu navegador, sin subir nada.