HyperFrames: El Framework Open Source que Convierte HTML en Video — Hecho para Agentes de IA
El 17 de abril, HeyGen liberó HyperFrames como open source — un framework de rendering de video donde las composiciones son documentos HTML. No es un editor de timeline. No es drag-and-drop. No es un DSL propietario. Es HTML con data attributes, renderizado frame por frame a MP4, MOV o WebM.
La idea central es elegante: los LLMs ya son excelentes generando HTML. Entonces, si definís un video como HTML, cualquier agente de IA puede producir video. Eso es exactamente lo que hace HyperFrames.
En dos días desde el lanzamiento, el repo ya superó las 5.6k estrellas en GitHub y 400 forks. Licencia Apache 2.0, escrito en TypeScript.
Cómo funciona
Una composición de HyperFrames es un documento HTML donde cada elemento recibe data attributes para timing y layout:
<div id="stage" data-composition-id="demo"
data-start="0" data-width="1920" data-height="1080">
<video id="clip-1" data-start="0" data-duration="5"
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"
style="font-size: 72px; color: white;">
Welcome to HyperFrames
</h1>
<audio id="bg-music" data-start="0" data-duration="5"
data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>
data-start y data-duration controlan el timing. data-track-index controla las capas. Ese es el modelo mental. Un div es un keyframe. CSS es el look. JavaScript maneja la animación.
El workflow son tres comandos:
npx hyperframes init my-video # scaffold del proyecto
npx hyperframes preview # preview en vivo en el browser (hot reload)
npx hyperframes render --output output.mp4 # render a video
Por debajo, HyperFrames carga tu HTML en Chrome headless, busca cada frame usando la API beginFrame de Chrome, lo captura, y pasa todo por FFmpeg. La fórmula es frame = floor(time * fps) — sin dependencias de reloj, sin race conditions. La misma entrada siempre produce la misma salida.
Este determinismo es la feature que hace viable a HyperFrames para pipelines de producción. Podés poner npx hyperframes render en tu CI, y va a producir exactamente el mismo video cada vez.
Hecho para agentes, no para humanos (pero los humanos también pueden usarlo)
El CLI es no-interactivo por defecto. Todas las entradas son flags. La salida es texto plano. Los errores fallan rápido. Esto es deliberado — está diseñado para que los agentes de IA puedan ejecutar cada comando sin parsear prompts interactivos ni navegar menús.
HyperFrames viene con skills que le enseñan al agente los patrones específicos del framework. Ejecutás hyperframes init y los skills se instalan automáticamente. En Claude Code, se registran como slash commands:
/hyperframes— componer y crear composiciones de video/hyperframes-cli— ayuda con comandos del CLI/gsap— asistencia con animaciones
Pero funciona con cualquier agente que pueda escribir HTML: Cursor, Gemini CLI, Codex — el que quieras. El patrón de prompting es natural:
“Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music.”
O el caso de uso más interesante — convertir contenido existente en video:
“Summarize the attached PDF into a 45-second pitch video using /hyperframes.”
“Turn this CSV into an animated bar chart race using /hyperframes.”
El agente escribe la composición HTML, HyperFrames la renderiza. Iterás hablándole al agente como si fuera un editor de video: “Hacé el título 2x más grande, cambiá a dark mode, y agregá un fade-out al final.”
Si preferís la experiencia interactiva humana, agregá --human-friendly al CLI y tenés una UI de terminal completa.
50+ bloques listos para usar
HyperFrames viene con un catálogo de bloques y componentes pre-armados que podés agregar con un solo comando:
npx hyperframes add flash-through-white # transición shader
npx hyperframes add instagram-follow # overlay social
npx hyperframes add data-chart # gráfico animado
El catálogo incluye overlays sociales, transiciones con shaders, visualizaciones de datos, efectos cinematográficos y más. Podés explorar el catálogo completo en Instagram Follow - HyperFrames.
Acá es donde HyperFrames se vuelve práctico para quienes no son expertos en video. No necesitás saber programación de shaders para usar una transición profesional — solo add el bloque y configuralo con atributos HTML.
El stack de animación
Para animaciones, HyperFrames soporta cualquier cosa que pueda hacer seek a un frame específico:
- GSAP — animaciones basadas en timeline (la recomendación principal)
- Lottie — animaciones de After Effects exportadas como JSON
- CSS transitions y keyframes — para efectos más simples
- Three.js — escenas 3D
- D3 — visualizaciones basadas en datos
- Frame Adapters custom — si tu runtime de animación puede hacer seek a un tiempo, HyperFrames puede capturarlo
El patrón de Frame Adapter es la clave arquitectónica: cualquier runtime de animación que implemente un método seek(time) se puede conectar al pipeline de rendering. Esto es lo que hace real la promesa de “cualquier cosa que un browser pueda renderizar puede ser un frame en tu video”.
Sin cloud, sin dependencias externas
Esto corre 100% en local. Sin API key. Sin cuenta. Sin procesamiento en la nube. Necesitás Node.js, Chrome (o Chromium) y FFmpeg. Nada más.
Para ambientes reproducibles, hay soporte de Docker. Para pipelines de CI/CD, podés ejecutar npx hyperframes render en cualquier entorno containerizado.
Esto importa por dos razones que la comunidad dev de LATAM conoce bien: primero, no dependés de un servicio que pueda cambiar precios o términos. Segundo, tu contenido nunca sale de tu máquina — relevante para cualquiera que trabaje con material confidencial o datos de clientes.
La foto grande: video como código
HyperFrames es interesante más allá de sus méritos técnicos por lo que señala sobre la dirección de la producción de contenido.
El pipeline tradicional de video es: guión → storyboard → grabar/animar → editar en timeline → exportar. Cada paso requiere una herramienta distinta y frecuentemente una persona diferente.
El pipeline de HyperFrames es: describí lo que querés → el agente escribe HTML → render → iterá. Una herramienta. Un workflow. Y como la composición es código, obtenés version control, code review, testing automatizado y CI/CD gratis.
HeyGen claramente construyó esto como infraestructura para su propio pipeline de video con IA (su video de lanzamiento fue construido con HyperFrames — el repo hyperframes-launch-video es público y completamente clonable). Pero al liberarlo como open source bajo Apache 2.0, están apostando a que convertir video-as-code en un estándar beneficia a todo el ecosistema — incluyendo el de ellos.
Para desarrolladores que nunca tocaron producción de video: esta es tu rampa de entrada. Ya sabés HTML. Ya sabés CSS. Ya tenés un agente de IA. HyperFrames es el puente.
Primeros pasos
# Instalar y crear proyecto
npx hyperframes init mi-primer-video
cd mi-primer-video
# Preview en el browser con live reload
npx hyperframes preview
# Render a MP4
npx hyperframes render
# O dejá que tu agente haga todo
# En Claude Code: /hyperframes "Create a 10-second intro with animated title"
Documentación completa: hyperframes.heygen.com
HyperFrames es Apache 2.0, corre en local y no requiere cuenta. Con 5.6k estrellas en sus primeras 48 horas, la comunidad claramente está prestando atención. Ya sea que quieras automatizar contenido de marketing, integrar video en tu pipeline de CI, o simplemente tengas curiosidad por lo que pasa cuando el video se convierte en otro archivo que tu agente puede escribir — HyperFrames vale los 5 minutos del quickstart.