HyperFrames es un framework de renderizado de video de codigo abierto de HeyGen que le permite escribir videos como HTML, CSS y JavaScript estandar y renderizarlos a MP4, WebM o MOV. Su eslogan lo dice todo: “Escribe HTML. Renderiza video. Construido para agentes.”
En la version v0.4.11 (abril de 2026) y con licencia Apache 2.0, HyperFrames representa un enfoque fundamentalmente diferente para la creacion de video programatica – uno construido desde cero para agentes de IA de codificacion en lugar de editores de video humanos.
Tabla de Contenidos
- Que Hace Diferente a HyperFrames?
- Como Funciona
- Inicio Rapido
- Construido para Agentes de IA
- Ajustes Preestablecidos del Sistema de Diseno
- Componentes Preconstruidos
- El Pipeline de Renderizado
- TTS y Subtitulos Incorporados
- Captura de Sitios Web
- Patron de Adaptador de Fotogramas
- Renderizado Determinista
- Limitaciones Actuales
- Primeros Pasos
Que Hace Diferente a HyperFrames?
Antes de HyperFrames, el enfoque estandar para video impulsado por codigo era Remotion, que requiere componentes React (TSX) y un pipeline completo de empaquetado. HyperFrames elimina todo eso:
| Caracteristica | HyperFrames | Remotion |
|---|---|---|
| Formato de autor | HTML + CSS + JS plano | React (TSX) |
| Paso de compilacion | Ninguno | Requerido (webpack/Vite) |
| Motor de animacion | GSAP (o CSS, Lottie, Three.js) | Impulsado por estado React |
| Licencia | Apache 2.0 (completamente abierta) | Codigo fuente disponible (pago > 3 asientos) |
| Nativo para IA | Si (habilidades para Claude, Cursor, etc.) | No |
| Renderizado distribuido | Maquina unica | Soporte Lambda maduro |
La idea central es que los agentes de IA de codificacion ya “hablan” HTML y CSS con fluidez. Al eliminar la dependencia de React y el empaquetador, HyperFrames facilita dramaticamente que los agentes compongan videos de forma autonoma.
Como Funciona
Una composicion de HyperFrames es un archivo HTML con atributos especiales data-* que controlan la temporizacion, las capas y el comportamiento de renderizado. GSAP (Plataforma de Animacion GreenSock) maneja las animaciones reales.
<!-- Una composicion basica de HyperFrames -->
<div data-duration="5" data-track-index="1">
<h1>Hola, Mundo del Video</h1>
<p class="slide-in">Este texto se anima en la pantalla</p>
</div>
Atributos Principales
| Atributo | Proposito |
|---|---|
data-start | Cuando aparece el elemento (en segundos desde el inicio de la composicion) |
data-duration | Cuanto tiempo permanece visible el elemento |
data-track-index | A que pista/capa visual pertenece el elemento |
class="clip" | Marca un elemento para recorte/enmascaramiento |
Las composiciones son archivos HTML planos que puede previsualizar en un navegador como cualquier pagina web, luego renderizar a video a traves de la CLI.
Inicio Rapido
El flujo de trabajo de la CLI es intencionalmente minimo:
# Inicializar un nuevo proyecto
npx hyperframes init my-video
# Previsualizar con recarga en vivo en el navegador
npx hyperframes preview
# Renderizar a MP4
npx hyperframes render
Ese es todo el flujo de trabajo. Sin configuracion de empaquetador, sin paso de compilacion, sin plantilla de framework.
Construido para Agentes de IA
Aqui es donde HyperFrames realmente se distingue. El framework incluye un instalador que ensena a su agente de IA de codificacion como componer videos:
npx skills add heygen-com/hyperframes
Una vez instalado, los agentes obtienen acceso a tres comandos de barra dedicados:
/hyperframes— Componer un nuevo video desde cero/hyperframes-cli— Ayuda con comandos CLI y configuracion de proyectos/gsap— Asistencia de animacion GSAP y referencia de sintaxis
Estos comandos funcionan en Claude Code, Cursor, Gemini CLI y OpenAI Codex. Un agente de IA puede pasar de un mensaje de texto como “crea un video de demostracion de producto de 30 segundos” a un archivo MP4 renderizado sin intervencion humana.
HeyGen puso esto a prueba con su propio video de lanzamiento – la composicion completa de produccion de 49.77 segundos, 1080p @ 30fps esta publicada como codigo abierto en GitHub, conteniendo 17 subcomposiciones usando animaciones CSS, GSAP, Lottie, Three.js y transiciones de sombreado. Fue creado por un agente de IA.
Ajustes Preestablecidos del Sistema de Diseno
HyperFrames incluye ocho ajustes preestablecidos de estilo visual que proporcionan diferentes direcciones esteticas para sus videos:
- Swiss Pulse – Diseno suizo limpio y minimalista con tipografia audaz
- Velvet Standard – Estetica calida y premium con degradados ricos
- Data Drift – Estilo tecnologico optimizado para visualizacion de datos
- Shadow Cut – Aspecto dramatico de alto contraste con sombras pronunciadas
- Neon Grid – Inspirado en cyberpunk con elementos brillantes
- Paper Grain – Sensacion analogica texturizada con superposicion de grano sutil
- Glassmorphism – Efectos de vidrio esmerilado con fondos borrosos
- Mono Chrome – Paleta de un solo color para resultados coherentes con la marca
Cada ajuste modifica globalmente los colores, la tipografia, el espaciado, las transiciones y los estilos de superposicion.
Componentes Preconstruidos
HyperFrames incluye mas de 50 componentes listos para usar accesibles a traves del catalogo de componentes. Estos cubren necesidades comunes de produccion de video:
- Transiciones de sombreado – Fundidos, barridos y efectos acelerados por GPU
- Superposiciones sociales – Superposiciones en formato Instagram, TikTok, YouTube
- Graficos de datos – Graficos de barras, lineas y circulares animados
- Tercios inferiores – Superposiciones profesionales de subtitulos y nombres
- Barras de progreso – Indicadores de linea de tiempo animados
- Temporizadores de cuenta regresiva – Cuentas regresivas de eventos y lanzamientos
- Informacion sobre herramientas y llamadas – Anotaciones que dirigen la atencion
El Pipeline de Renderizado
El pipeline tecnico es sencillo pero efectivo:
- Puppeteer lanza una instancia de Chrome sin interfaz grafica
- Cada fotograma de la composicion se captura como una captura de pantalla del navegador
- FFmpeg codifica la secuencia de fotogramas en el formato de video de destino (MP4, WebM o MOV)
Debido a que el material fuente es HTML estandar renderizado en un motor de navegador real, todo lo que funciona en una pagina web – animaciones CSS, canvas, WebGL, Three.js, Lottie – funciona en un video de HyperFrames.
TTS y Subtitulos Incorporados
HyperFrames incluye texto a voz y generacion de subtitulos como comandos de CLI de primera clase:
# Generar audio de narracion desde texto
npx hyperframes tts --text "Su guion aqui" --output voiceover.wav
# Generar subtitulos temporizados desde audio
npx hyperframes transcribe --input voiceover.wav --output captions.srt
Esto significa que se puede generar un video completo con narracion y subtitulos a partir de una sola entrada de texto.
Captura de Sitios Web
Una caracteristica inesperada pero poderosa: puede convertir cualquier sitio web en vivo en un video capturandolo como una composicion de HyperFrames.
npx hyperframes capture https://example.com
Esto abre posibilidades creativas – paginas de producto como anuncios de video, recorridos de documentacion, paneles dinamicos grabados como screencasts – todo sin escribir una sola linea de HTML a mano.
Patron de Adaptador de Fotogramas
HyperFrames admite multiples frameworks de animacion a traves de su arquitectura de Adaptador de Fotogramas. Usted elige el motor de animacion que se adapte a su caso de uso:
| Adaptador | Mejor Para |
|---|---|
| GSAP | Animaciones complejas basadas en linea de tiempo (predeterminado, mas capaz) |
| CSS | Transiciones simples y efectos hover |
| Lottie | Animaciones vectoriales estilo After Effects |
| Three.js | Escenas 3D y efectos WebGL |
Puede mezclar adaptadores dentro de una sola composicion – por ejemplo, una introduccion 3D con Three.js, un segmento principal animado con GSAP e iconos Lottie en todo el video.
Renderizado Determinista
HyperFrames esta disenado para ser deterministico: la misma entrada siempre produce una salida identica. No hay Math.random(), ni desviacion de reloj, ni fluctuacion de temporizacion de fotogramas. Esta propiedad es critica para:
- Pipelines CI/CD – Renderizar videos en compilaciones automatizadas con resultados predecibles
- Flujos de trabajo de agentes de IA – Los agentes pueden refinar iterativamente una composicion sabiendo que cada renderizado es reproducible
- Pruebas de regresion – Comparar fotograma por fotograma con renderizados anteriores
Limitaciones Actuales
Como proyecto en etapa inicial (v0.4.x), HyperFrames tiene limitaciones importantes a tener en cuenta:
- Sin renderizado distribuido – A diferencia de la integracion Lambda de Remotion, HyperFrames renderiza en una sola maquina. Los videos largos o complejos tomaran tiempo de reloj proporcional a su duracion.
- 4K/60fps no recomendado – El pipeline de captura y codificacion esta disenado para 1080p @ 30fps. Resoluciones y velocidades de fotogramas mas altas seran lentas.
- Node.js >= 22 requerido – Los tiempos de ejecucion de Node.js mas antiguos no son compatibles.
- FFmpeg debe estar instalado – No viene incluido con el paquete npm.
- Ecosistema pequeno – Mas de 50 componentes integrados es un buen comienzo, pero la biblioteca de plantillas de la comunidad es minima en comparacion con herramientas establecidas.
Primeros Pasos
Requisitos del sistema: Node.js 22 o superior, FFmpeg instalado en su PATH.
# Crear un nuevo proyecto
npx hyperframes init my-first-video
cd my-first-video
# Previsualizar en el navegador
npx hyperframes preview
# Editar la composicion (es solo HTML)
# open src/composition.html
# Renderizar a video
npx hyperframes render
Agregue la habilidad del agente de IA para que Claude, Cursor o Gemini compongan por usted:
npx skills add heygen-com/hyperframes
Luego simplemente pida a su agente: “Cree un video de lanzamiento de producto de 20 segundos usando el preset Swiss Pulse con un temporizador de cuenta regresiva y transiciones de sombreado.”
Resumen
HyperFrames redefine la creacion de video como una actividad de programacion mas que una actividad de diseno. Al usar HTML como formato de autor y mantener la cadena de herramientas minima (sin empaquetador, sin framework, sin DSL propietario), hace que el video programatico sea accesible para cualquiera que pueda escribir una pagina web – y especialmente para los agentes de IA que estan escribiendo cada vez mas esas paginas por nosotros.
Todavia no es un reemplazo para Remotion en flujos de trabajo de renderizado distribuido a escala de produccion, pero para creadores individuales, startups y pipelines de agentes de IA, HyperFrames ofrece algo genuinamente nuevo: la capacidad de describir un video en el mismo lenguaje que usamos para describir la web, y tenerlo renderizado sin friccion.
El codigo fuente esta disponible en GitHub, la documentacion vive en hyperframes.heygen.com, y el video de lanzamiento que fue creado con la herramienta esta publicado como codigo abierto en el repositorio hyperframes-launch-video.
