HyperFrames: el marco de código abierto que convierte HTML

Código de composición HTML de HyperFrames en paralelo con salida MP4 renderizada, que muestra el flujo de trabajo de HTML a vídeo

Introducción

!HyperFrames rendering pipeline: HTML template -> frame extraction -> video assembly

Si alguna vez ha intentado automatizar la producción de video, se ha topado con la misma pared: todas las herramientas (Premier, After Effects e incluso compositores basados en web) están diseñadas para una persona sentada en un escritorio con un mouse, no para un script que se ejecuta sin supervisión en una canalización de CI.

¿Qué pasaría si generar videos funcionara de la misma manera que crear un sitio web?

Hoy veremos HyperFrames: el marco de renderizado de código abierto de HeyGen que trata HTML/CSS como un formato de creación de videos de primera clase. Usted escribe marcado estándar, agrega algunos atributos de datos para la sincronización y lo renderiza en un MP4 con precisión de fotograma. Sin reacción DSL. Sin gráfico de escena propietario. Sin editor de vídeo.

Esta es la herramienta que permite a los agentes de inteligencia artificial como Claude Code escribir e iterar en composiciones de video de la misma manera que escriben código. Y tiene licencia Apache 2.0, código completamente abierto, en github.com/heygen-com/hyperframes.

El problema actual del vídeo programático

El vídeo se ha resistido al tratamiento de "código como infraestructura" durante décadas. Cada intento requiere:

Un editor GUI que no se puede programar y requiere exportación manual
Un contenedor de React (mirándote, Remotion) que agrega un paso de compilación y DSL obstinado
Grabación de pantalla de una ventana del navegador: caídas de fotogramas frágiles, de baja calidad
Servicios de renderizado en la nube que cuestan por minuto y te vinculan a un proveedor

El costo real no es sólo el de las herramientas. Es que los flujos de trabajo de video no pueden participar en Git. No puedes diferenciar un proyecto de Premiere. No puedes revisar la composición de un video en una solicitud de extracción. No puedes reproducir la misma salida a partir de las mismas entradas a menos que tu artista lo haga exactamente de la misma manera cada vez. Y los agentes de IA, que se han vuelto notablemente buenos escribiendo código, están completamente excluidos del medio.

El vídeo automatizado a escala requiere tres cosas que ninguna herramienta existente ofrece por completo:

Salida determinista: misma entrada = vídeo idéntico, siempre
Fuente rastreable por Git: diferencias de código, reversiones y ramificaciones
Autoría nativa del agente: los LLM pueden escribir y modificar composiciones sin capacitación especializada

HyperFrames está diseñado para ofrecer los tres.

La solución: HyperFrames

HyperFrames es un marco de renderizado de video de código abierto de HeyGen que le permite definir composiciones de video como archivos HTML y renderizarlos en MP4 a través de Chrome + FFmpeg sin cabeza.

Su filosofía central es elegantemente simple: "Escribir HTML. Renderizar video. Creado para agentes".

Cada elemento de su HTML se convierte en un "clip" cronometrado en la línea de tiempo del video, controlado a través de atributos datos-. Las animaciones viven en CSS/JS estándar (GSAP, Lottie, Three.js). La vista previa es un navegador de recarga en vivo. El renderizado es una salida codificada en FFmpeg y con precisión de fotograma. Ningún formato propietario se interpone entre usted y el archivo final.

Con 19,9 mil estrellas y 1,9 mil bifurcaciones con 145 lanzamientos en mayo de 2026, ya es el marco de video de código abierto con mayor impulso en el espacio de desarrolladores + agentes de IA.

Características clave

Composición nativa HTML

Las composiciones de HyperFrames son archivos HTML simples. Sin reaccionar. Sin TSX. Sin paquete.

<div id="etapa"
     composición-de-datos-id="mi-vídeo"
     inicio-datos="0"
     ancho de datos="1920"
     altura-datos="1080">

  <vídeo
    id="clip-1"
    inicio-datos="0"
    duración-datos="5"
    índice-de-pista-de-datos="0"
    src="introducción.mp4"
    silenciado
    juega en línea
  >>vídeo>

  <img
    id="superposición"
    clase="clip"
    inicio-datos="2"
    duración-datos="3"
    índice-de-pista-de-datos="1"
    src="logotipo.png"
  />

  <audio
    id="bg-música"
    inicio-datos="0"
    duración-datos="9"
    índice-de-pista-de-datos="2"
    volumen de datos = "0,5"
    src="música.wav"
  >>audio>
</div>

La Regla de Tres rige las composiciones válidas:

Elemento raíz necesita data-composition-id, data-width, data-height
Elementos cronometrados necesitan class="clip", data-start, data-duration, data-track-index
Animaciones deben usar { pausado: verdadero } en las líneas de tiempo GSAP y registrarse en window.__timelines

Esta es una ceremonia casi nula. Cualquier desarrollador web que pueda escribir elementos "div" puede escribir una composición de vídeo.

Diseño de IA primero

HyperFrames no solo es compatible con la IA: está diseñado para agentes de codificación de IA.

La CLI no es interactiva de forma predeterminada, lo que significa que se puede programar por diseño. Los mensajes de error son legibles por máquina. La salida es texto sin formato. No hay mensajes TTY que bloqueen a un agente sin cabeza.

Más importante aún, el marco viene con un paquete de habilidades que enseña a los agentes de IA los patrones correctos:

npx smata agregar heygen-com/hyperframes

Una vez instalados, los siguientes comandos de barra diagonal estarán disponibles en Claude Code:

/hyperframes — crear y editar composiciones
/hyperframes-cli — inicio, pelusa, vista previa, renderizado
/hyperframes-media — TTS, transcripción, eliminación de fondo
/gsap, /lottie, /tres, /animejs, /css-animations, /waapi — habilidades de animación específicas del adaptador

Un mensaje de inicio en frío como "crear una introducción de producto de 10 segundos con un título gradual y música de fondo" produce una composición funcional. Las indicaciones de inicio en caliente que toman HTML/PDF/CSV existentes y los convierten en videos funcionan igualmente bien. La iteración es simplemente lenguaje natural: "haga el título 2 veces más grande, agregue un desvanecimiento al final".

Esta es una experiencia cualitativamente diferente a intentar ejecutar Premiere a través de API o codificar manualmente JSX en Remotion.

Más de 50 bloques listos para usar

HyperFrames incluye un registro de bloques extensible. Instale componentes comunes con un solo comando CLI:

Los hipercuadros npx agregan transición de sombreado # flash a través de blanco
Los hipercuadros npx agregan superposición social de seguimiento de Instagram #
Los hipercuadros npx agregan gráfico de datos # gráfico animado

Las plantillas para estilos de vídeo incluyen swiss-grid, nyt-graph, play-mode y vignelli, que cubren narrativa corporativa limpia, datos editoriales, redes sociales dinámicas y formatos de retrato 9:16.

El patrón del adaptador de marco

HyperFrames introduce una abstracción "Adaptador de marco" que separa claramente la lógica de sincronización del tiempo de ejecución de la animación. Traiga su propia biblioteca de animaciones de búsqueda (GSAP, Lottie, fotogramas clave CSS, Three.js o Web Animations API) y HyperFrames se encargará de la búsqueda y composición de fotogramas.

Esto significa que no es necesario que reescribas tus conocimientos de animación existentes. Si su equipo ya utiliza líneas de tiempo GSAP para animaciones web, esas mismas líneas de tiempo funcionan en composiciones de video HyperFrames.

Motor de renderizado determinista

La canalización de renderizado tiene precisión de fotogramas por construcción:

Fuente HTML → Chrome sin cabeza carga la composición → Chrome busca marco = piso (tiempo × FPS) → captura de pantalla → codificación FFmpeg → MP4

La API beginFrame de Chrome brinda precisión de subtrama. No hay reproducción de reloj de pared. No hay condiciones de carrera entre el cabezal de reproducción y la captura. El mismo HTML, las mismas entradas, el mismo archivo de vídeo siempre.

Este determinismo es lo que hace viables los flujos de trabajo impulsados por agentes de IA. Un LLM puede modificar de forma iterativa y segura una composición, volver a renderizar y realizar diferencias visuales, algo que es imposible con herramientas cuya salida cambia según la carga de la máquina, la desviación del reloj o la hora del día.

Código totalmente abierto (Apache 2.0)

HeyGen envía HyperFrames bajo Apache 2.0, una licencia permisiva totalmente aprobada por OSI. Ningún nivel pago por encima del umbral de equipo pequeño (como lo usa Remotion). No hay licencias de origen disponibles. Plenos derechos para bifurcar, modificar, enviar comercialmente o construir un producto sobre él.

Empezando

Requisitos previos

nodo -v # necesita>= 22 (consulte con nvm)
ffmpeg -versión # necesaria para codificar

Configuración rápida

# Opción 1: inicio del proyecto interactivo
hipercuadros npx inician mi video
cd mi-video
Vista previa de hipercuadros npx # abre el navegador con recarga en vivo
Los hipercuadros npx renderizan # salidas MP4

## Opción 2: agente de IA (recomendado)
Habilidades de npx agregan heygen-com/hyperframes
## Luego use /hyperframes en Claude Code, Cursor, etc.

Primera composición

Cree index.html en la raíz de su proyecto:

<div id="raíz"
     composición-de-datos-id="hola"
     ancho de datos="1920"
     altura-datos="1080">

  <h1 id="título" clase="clip"
      inicio-datos="0"
      duración-datos="5"
      índice-de-pista-de-datos="0"
      estilo="font-size: 96px; color: blanco; font-family: sans-serif;">
    Hipermarcos
  </h1>
</div>

Vista previa de hipercuadros npx # ver el resultado en vivo
Los hipercuadros npx renderizan # guardan como salida.mp4

Eso es todo. Sin paquete. No hay npm install del núcleo del marco. Un único archivo HTML es una composición de vídeo completa.

Uso avanzado

Animaciones de la línea de tiempo GSAP

Las animaciones GSAP funcionan en HyperFrames con una regla crítica: pausarlas para que HyperFrames controle la reproducción:

// timeline.js — cargado mediante <script> en tu composición
const tl = gsap.timeline({ pausado: verdadero });
tl.to('#title', { x: 200, opacidad: 1, duración: 2, facilidad: 'power2.out' })
  .to('#subtitle', { y: 0, opacidad: 1, duración: 1 }, '-=0.5');

// Regístrese para que HyperFrames pueda buscarlo
ventana.__timelines = { principal: tl };

HyperFrames busca window.__timelines.main para precisar la posición del fotogramans durante el renderizado. Puede desplazarse por la línea de tiempo en la vista previa del navegador en cualquier momento y ver una vista previa exacta con precisión de fotograma.

Composiciones multipista

Los índices de seguimiento controlan las capas en el compositor. Un "índice de seguimiento de datos" más alto se muestra en la parte superior:

<!-- Pista 0: vídeo base -->
<vídeo datos-track-index="0" ... />

<!-- Pista 1: gráficos superpuestos -->
<svg datos-track-index="1" ... />

<!-- Pista 2: subtítulos (parte superior de la pila) -->
<div class="clip" data-track-index="2" ... />

Hasta todas las capas del compositor del navegador disponibles por cuadro; sin límite estricto por proyecto.

Canalización de sitio web a video

HyperFrames incluye una habilidad de "sitio web a hiperframes" que captura una URL en vivo y la convierte en una composición de video. Esto permite flujos de trabajo totalmente automatizados como:

"Representa la página de inicio en aratech.ae como un video screencast de desplazamiento de 30 segundos"
"Toma el documento de Notion y convierte cada sección en una diapositiva cronometrada"
"Generar una demostración de producto a partir de la URL de preparación en vivo"

Este es el ciclo de generación de vídeo compatible con CI que la mayoría de los equipos de marketing todavía realizan a mano.

Lottie y Three.js

// Reproductor Lottie registrado por el tiempo de ejecución de HyperFrames
ventana.__hfLottie.play('animation.json');

// Escena Three.js: HyperFrames inyecta el tiempo del fotograma actual
ventana.__hfThreeTime = 0; // segundos, configura cada cuadro por el motor

Las habilidades del adaptador (/lottie, /tres) inicializan automáticamente el global correcto y exponen la sincronización del cuadro, por lo que no necesita configurar ninguna plomería usted mismo.

Comparación: HyperFrames vs Remotion

HyperFrames está directamente inspirado en Remotion, el marco de video programático basado en React utilizado en HeyGen en producción. Ambos manejan Chrome sin cabeza. Ambos producen resultados deterministas con precisión de fotograma. Ambas habilidades de agente marítimo. La división arquitectónica se basa en una decisión central: ¿qué escribe el autor principal?

	Hipermarcos	Remoción
Formato de creación principal	HTML + CSS + JS	Reaccionar TSX
Paso de construcción	Ninguno: `index.html` se reproduce tal cual	Paquete requerido
Animaciones de biblioteca (GSAP, Lottie)	Buscable y preciso en el marco mediante adaptadores	Juega con el reloj de pared durante el renderizado
HTML/CSS existente	Pegar y animar	Debe reescribirse como JSX
Representación distribuida	Máquina única hoy	Lambda, lista para producción
Licencia	Apache 2.0 (código totalmente abierto)	Fuente disponible, pagado por encima del equipo pequeño

Para equipos que ya escriben HTML/CSS o necesitan insertar recursos web existentes en un video: HyperFrames es la opción obvia. Para los equipos que ya han invertido mucho en una biblioteca de componentes de React con CI/CD: Remotion tiene algunas ventajas en el frente distribuido.

Vale la pena destacar la brecha en materia de licencias. El modelo de "fuente disponible" de Remotion significa que el tamaño, los ingresos o la topología de implementación de su empresa pueden activar una licencia paga. HyperFrames no tiene tal restricción en Apache 2.0.

Por qué esto importa ahora

Dos cambios convergentes hacen que HyperFrames sea relevante este año en lugar de algún proyecto futuro:

1. El video del agente de IA está aquí. Claude Code, Cursor y Codex pueden codificar. Ahora, con HyperFrames, pueden codificar vídeo. Lenguaje natural → composición HTML → MP4 renderizado es un flujo de trabajo de un extremo a otro que se ejecuta en la actualidad. No es necesario esperar a que un modelo de vídeo de IA sea lo suficientemente bueno; necesitas HTML y un renderizador para ser lo suficientemente bueno, y lo son.

2. El video programático es un foso competitivo. Los equipos que generan videos a escala a partir de datos estructurados (CSV → carreras de gráficos de barras, PDF → videos de presentación, sitio web → carretes de demostración) tienen una ventaja inhumana en la velocidad de producción de contenido. Las herramientas que atrapen primero a la mayoría de los desarrolladores y agentes definirán la infraestructura para la próxima ola de contenido automatizado.

HyperFrames es temprano pero avanza rápido: 145 lanzamientos, un ecosistema de habilidades dedicado e integración con todos los principales agentes de codificación de IA. Es el momento adecuado para empezar a construir con ello.

Conclusión y próximos pasos

HyperFrames no es sólo otra herramienta de vídeo. Es el primer marco de renderizado que trata la composición de video como un artefacto de primera clase en el flujo de trabajo de un desarrollador: versionado en Git, revisado en PR, iterado por agentes y renderizado de manera determinista en cada confirmación.

Si alguna vez has necesitado:

Genere 100 videos de introducción personalizados a partir de datos de CRM
Convierta un conjunto de páginas de destino en un carrete de demostración.
Automatizar la creación de clips sociales a partir de transcripciones de podcasts
Incrustar salida de video generada por IA en una canalización de CI/CD

…HyperFrames es la herramienta que cierra el círculo.

¿Listo para comenzar?

HyperFrames: el marco de código abierto que convierte HTML en vídeo de producción

Table of Contents