Escribir HTML para hacer video: cómo HyperFrames abre el motion graphics a quienes nunca abrieron After Effects

HyperFrames es un framework open source de HeyGen que convierte HTML, CSS y animaciones en un MP4. Descubre cómo escribir una página web y renderizarla como video, quién se beneficia de verdad de esta democratización del motion graphics y dónde están sus límites reales.

Tabla de Contenidos

Qué es HyperFrames, en una frase
La parte que sí importa: la democratización no es automática
Cómo funciona, en concreto
Instalación
La vía real para no programadores: los skills
Para qué sirve de verdad (y para qué no)
Tips para creadores de contenido
Tips para editores
La conclusión incómoda
Recursos

Qué es HyperFrames, en una frase

Es un framework open source de HeyGen que convierte HTML, CSS y animaciones en un archivo MP4. Su eslogan lo resume mejor que cualquier explicación: "Write HTML. Render video. Built for agents."

Escribes una página web. Le agregas unos atributos que le dicen al sistema cuándo empieza cada elemento y cuánto dura. Ejecutas un comando. Sale un video.

Lo importante no es la novedad técnica —Remotion ya hacía algo parecido con React desde hace años—. Lo importante es a quién le abre la puerta. HTML y CSS son el lenguaje más enseñado del planeta. Y más relevante todavía: son el lenguaje que los agentes de IA escriben mejor que ninguno.

La parte que sí importa: la democratización no es automática

Aquí quiero detenerme, porque es la trampa en la que caemos cada vez que aparece una herramienta así.

Que una tecnología sea accesible no significa que nos haga libres. Significa que nos da la posibilidad de serlo. La diferencia está en si aprendemos a usar ese conocimiento o si nos quedamos consumiendo el output que la herramienta produce por defecto.

Piénsalo con un caso conocido. Cuando las cámaras de los celulares se volvieron buenas, no todos nos convertimos en fotógrafos. La mayoría empezó a tomar más fotos mediocres, más rápido. Los que sí se volvieron fotógrafos fueron los que usaron el acceso barato al obturador para aprender composición, luz y timing —cosas que la cámara nunca les iba a regalar.

Con el motion graphics generado por agentes pasa exactamente lo mismo. HyperFrames te quita el obstáculo del software. No te quita el trabajo de saber qué quieres contar, cuánto debe durar un plano, cuándo un texto es demasiado texto y por qué una transición de tres segundos mata la retención de un anuncio de quince.

La herramienta democratiza la ejecución. El criterio sigue siendo tuyo, y sigue siendo lo escaso.

Cómo funciona, en concreto

Una composición de HyperFrames es un archivo index.html. Nada más. Se abre en el navegador y se ve. Este es un ejemplo tomado de la documentación oficial:

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0"
         src="intro.mp4" muted playsinline></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">
    Launch day
  </h1>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.5" src="music.wav"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

Si vienes de edición de video, léelo otra vez y vas a reconocer todo: data-track-index son tus pistas en el timeline, data-start es dónde arranca el clip, data-duration cuánto dura. Es una línea de tiempo escrita en texto plano en lugar de arrastrada con el mouse.

El motor abre ese HTML en un Chrome sin interfaz, avanza cuadro por cuadro capturando cada frame, y se lo pasa a FFmpeg para armar el MP4. Como cada frame se genera buscando una posición exacta en el tiempo —no reproduciendo en tiempo real—, el resultado es determinista: el mismo archivo produce siempre exactamente el mismo video. Eso es lo que permite automatizar renders sin sorpresas.

Instalación

Antes de nada, dos requisitos: Node.js 22 o superior y FFmpeg. Si no los tienes, instálalos primero —Node desde nodejs.org y FFmpeg desde ffmpeg.org o con el gestor de paquetes de tu sistema (brew install ffmpeg en Mac, winget install ffmpeg en Windows).

Con eso listo, el flujo completo son cuatro comandos:

# 1. Crear un proyecto nuevo
npx hyperframes init mi-video
cd mi-video

# 2. Ver el resultado en el navegador, con recarga en vivo
npx hyperframes preview

# 3. Exportar a MP4
npx hyperframes render

No hay que instalar nada globalmente: npx descarga y ejecuta al vuelo. Si algo falla en el arranque, npx hyperframes doctor revisa el entorno y te dice qué falta.

Para instalar los skills que le enseñan a tu agente de IA a usar el framework —el camino recomendado si no quieres escribir HTML a mano—:

npx skills add heygen-com/hyperframes --full-depth

Se abre un selector sin nada preseleccionado; el grupo Core Skills es todo lo que necesitas, porque el enrutador /hyperframes instala cada flujo de trabajo cuando lo pidas. No omitas --full-depth: sin esa bandera se descarga una versión del registro que puede estar desactualizada por horas.

Y para mantener la instalación al día más adelante:

npx hyperframes skills update

Por último, para agregar bloques listos del catálogo a un proyecto existente:

npx hyperframes add flash-through-white   # transición con shader
npx hyperframes add instagram-follow      # overlay social
npx hyperframes add data-chart            # gráfica animada

La vía real para no programadores: los skills

Aquí está el punto que hace esto interesante para creadores de contenido, y no solo para desarrolladores.

HyperFrames publica veinte skills —paquetes de instrucciones— que le enseñan a un agente de IA (Claude Code, Cursor, Codex, Gemini CLI) cómo producir video con el framework. Ya los instalaste en el paso anterior, así que a partir de aquí tu interacción no es escribir HTML: es describir el video.

Usando /hyperframes, crea un intro de producto de 10 segundos con un título que aparece con fade-in, un video de fondo y música ambiental suave.

El agente planifica la estructura, escribe el HTML, conecta las animaciones, agrega el audio, revisa errores y renderiza. Tú revisas y corriges. Es exactamente el modelo de trabajo de un director con un editor: tú decides, otro ejecuta, y la calidad final depende de qué tan preciso seas al pedir y qué tan bueno seas juzgando el resultado.

Vale la pena conocer los skills por nombre, porque son básicamente un menú de formatos:

/hyperframes — el enrutador. Se lee primero siempre; identifica qué tipo de pieza quieres y llama al workflow correcto.
/product-launch-video — promos de producto o sitio web, hasta ~3 minutos (el punto dulce está en 30-90 segundos).
/faceless-explainer — explicar un concepto sin cámara ni producto, con visuales generados desde cero.
/motion-graphics — piezas cortas sin narración, bajo 10 segundos: tipografía cinética, un dato animado, un logo sting, un lower-third. Exporta MP4 o overlay transparente.
/embedded-captions — subtítulos diseñados sobre un video de cámara ya existente.
/talking-head-recut — empaquetar una entrevista o podcast con lower-thirds, callouts de datos, pull-quotes y PiP.
/music-to-video — video sincronizado al beat de una pista de audio.
/slideshow — presentaciones navegables con reveals y navegación, no video renderizado.
/general-video — todo lo demás: piezas largas, multi-escena, sizzle reels.

Y hay un skill que probablemente sea el más útil de todos para un creador: /media-use. Resuelve la búsqueda de música de fondo, efectos de sonido, imágenes, íconos, logos y voces, los descarga a archivos locales y lleva un registro de qué usaste dónde. Es la parte aburrida de la producción, automatizada.

Para qué sirve de verdad (y para qué no)

Donde HyperFrames rinde:

Anuncios en volumen. Si tienes que sacar la misma pieza en 9:16, 1:1 y 16:9, con tres copies distintos y dos ofertas, esto es un cambio de categoría. La composición es un archivo de texto: cambias variables y renderizas veinte versiones. Ningún editor manual compite con eso.

Contenido recurrente y con datos. El resumen semanal de métricas, el video del ranking del mes, la infografía animada que se actualiza. Si el formato es fijo y solo cambian los números, se automatiza una vez y corre solo.

Assets de apoyo. Lower-thirds, transiciones, contadores animados, tickers, overlays con fondo transparente para meter en tu editor de siempre. No reemplaza tu edición: la alimenta.

Redes sociales con captions diseñados. Subtítulos que se ven bien, no los que genera el algoritmo de la plataforma.

Donde no vale la pena forzarlo:

Piezas de autor donde el valor está en un tratamiento visual único y no repetible.
Animación de personajes, rigging, cualquier cosa que necesite 3D serio de verdad.
Proyectos donde la iteración es exploratoria y ver el resultado al instante importa más que la reproducibilidad.

La licencia es Apache 2.0, sin cobro por render ni umbrales comerciales. Eso importa: puedes usarlo en trabajo de cliente sin pensarlo dos veces.

Tips para creadores de contenido

Escribe la duración antes que nada. El error número uno al pedirle video a un agente es no fijar los tiempos. "Un intro corto" produce cualquier cosa. "8 segundos: 0-2 logo, 2-6 título, 6-8 CTA" produce lo que querías. Piensa en segundos, no en descripciones.

Un mensaje por escena, sin excepciones. El HTML te deja meter seis elementos animados en la misma pantalla. No lo hagas. La restricción que antes te imponía el esfuerzo de animar ahora te la tienes que imponer tú.

Diseña sin audio primero. Buena parte de tu audiencia va a ver la pieza en silencio. Si el video no comunica muteado, no funciona. La música es refuerzo, no soporte.

Guarda tu frame.md. HyperFrames usa un archivo de sistema de diseño —colores, tipografías, escalas, reglas— que el agente lee antes de componer. Escríbelo una vez con tu identidad de marca y todas tus piezas van a salir consistentes sin que lo pidas cada vez. Es la diferencia entre tener una marca y tener videos sueltos.

Construye una biblioteca, no piezas sueltas. Cada composición que funcione, guárdala como plantilla. En tres meses vas a tener un catálogo propio y tu tiempo de producción se va a desplomar. Ahí es donde esto se vuelve realmente rentable.

No publiques el primer render. Nunca. Míralo tres veces: una por timing, una por legibilidad, una en el celular. El agente no tiene criterio, tú sí.

Tips para editores

Empieza por los assets, no por el proyecto completo. El camino de entrada más suave es usar HyperFrames para producir overlays con canal alpha y meterlos en Premiere, Resolve o Final Cut. Ganas velocidad sin cambiar tu flujo.

Aprende solo tres atributos. data-start, data-duration, data-track-index. Con eso ya puedes leer y corregir cualquier composición que te entregue un agente. No necesitas saber programar; necesitas saber editar un timeline, que ya sabes.

Trata las versiones como versiones. El proyecto es texto plano, así que Git funciona. Puedes ver exactamente qué cambió entre el corte 1 y el corte 2, línea por línea, y volver atrás sin miedo. Eso es algo que tu editor de video no te da.

El determinismo es tu red de seguridad. Un archivo de proyecto siempre produce el mismo resultado. Si algo sale mal en la entrega, puedes reproducir el problema exacto. Se acabó el "en mi máquina se veía bien".

Aprovecha el catálogo antes de construir desde cero. Hay bloques listos para transiciones, gráficas animadas, overlays sociales y captions, todos instalables con npx hyperframes add. Empieza ahí y modifica; no empieces con la página en blanco.

La conclusión incómoda

HyperFrames no te convierte en motion designer. Te quita la excusa de no serlo.

Y esa distinción es toda la historia de la democratización tecnológica. WordPress no hizo escritores; hizo que cualquiera pudiera publicar, y los que ya tenían algo que decir encontraron audiencia. Las DAWs no hicieron músicos; abrieron el estudio, y quien tenía oído terminó sacando discos desde su cuarto.

Herramientas como esta bajan el costo de intentar prácticamente a cero. Lo que queda del otro lado —el criterio, el gusto, saber qué contar y cuándo callarse— no se descarga con npx. Sigue costando lo mismo que siempre: tiempo, atención y la disciplina de mirar tu propio trabajo con honestidad.

La libertad no viene con la herramienta. Viene de aprender a usarla.