Tu IA escribió una animación. Llévatela como video.

ChatGPT, Claude y Gemini te entregan código, pero las redes sociales, las presentaciones y los editores piden un archivo de video. Pega el código aquí y descárgalo.

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.

Del chat al video
  1. 1
    Pide un solo archivo HTML
    Dile al asistente qué quieres animar y pídele un único archivo HTML. Añade el prompt de abajo para que el resultado quede listo para exportar.
  2. 2
    Copia el código
    En ChatGPT, Claude o Gemini, usa el botón de copiar del bloque de código. Si el asistente muestra una vista previa en vivo, cambia primero a la vista de código.
  3. 3
    Pega y exporta
    Pégalo al inicio de esta página, elige la proporción de tu plataforma (9:16 para Reels, Shorts y TikTok, 16:9 para YouTube y presentaciones) y exporta.
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.
¿Por qué no grabar la pantalla o usar la línea de comandos?
Las grabaciones de pantalla van a tirones, muestran el cursor y salen con un tamaño incorrecto. Las herramientas de línea de comandos dan resultados exactos, pero hay que instalar Node, un navegador sin interfaz y FFmpeg. Esta página hace la misma generación fotograma a fotograma sin instalar nada.
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.