Idioma: Español

Convierte en video tu animación HTML generada con IA

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

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.

Del chat al video
  1. 1
    Pide un único archivo HTML
    Dile al asistente qué quieres animar y pídele un solo archivo HTML. Añade el prompt de abajo para que el resultado salga 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 antes a la vista de código.
  3. 3
    Pega y exporta
    Pégalo en la parte superior 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.
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.
¿Por qué no grabar la pantalla o usar la línea de comandos?
Las grabaciones de pantalla se entrecortan, muestran el cursor y salen con un tamaño que no es el que buscas. Las herramientas de línea de comandos dan resultados exactos, pero exigen instalar Node, un navegador sin interfaz y FFmpeg. Esta página renderiza igual, 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
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.