Producir un vídeo corto de marca —una intro, una promo, un lower third para un anuncio— ha costado históricamente entre 4.000 y 5.000 dólares por minuto. En 2026, un equipo técnico con un agente de IA y la herramienta adecuada puede bajar ese coste a unos 400 dólares por minuto. La diferencia no es la creatividad: es quién escribe la composición.

Esa pieza que faltaba se llama Hyperframes. Y es probable que sea el cambio más interesante en la producción audiovisual asistida por IA del año.

Qué es Hyperframes

Hyperframes es un framework open source publicado por HeyGen bajo licencia Apache 2.0. Sirve para renderizar vídeo a partir de composiciones HTML con atributos data-*, animadas con CSS y GSAP, y orquestadas desde la línea de comandos.

Su propósito declarado es claro: que el usuario principal del framework no sea un desarrollador humano, sino un agente de IA. Hyperframes está diseñado para que un agente como Claude Code, Cursor, Codex, OpenCode o Gemini CLI escriba las composiciones y el humano se limite a dirigir el resultado. Esa decisión arquitectónica lo separa de Remotion, su alternativa basada en React, y abre una vía de trabajo que antes no existía.

Stack técnico mínimo

• Base: HTML + CSS + GSAP.
• Requisitos: Node.js 22 o superior y FFmpeg.
• Captura: Puppeteer.
• Codificación: FFmpeg.
• TTS integrado: Kokoro-onnx (de momento solo inglés).

Render determinista: el mismo HTML produce siempre el mismo vídeo, frame a frame. Eso permite trabajar en pipeline y meterlo en CI/CD si hace falta.

Por qué tiene sentido en 2026

Durante los últimos diez años, las herramientas de vídeo asistido por código (Remotion, Motion Canvas, GreenSock por su cuenta) asumían que la persona que escribe el código tiene oficio: conoce React, sabe componer un timeline, entiende qué es un easing. Esa premisa era razonable cuando la IA no podía escribir frontend con criterio.

La premisa de 2026 es la opuesta. Un agente de IA bien dirigido escribe HTML y CSS con soltura, y entiende GSAP a nivel sintáctico mejor que el 80 % de los desarrolladores juniors. Lo que la IA no puede hacer es dirigir: decidir qué dura cada plano, qué énfasis llevan los textos, qué tono pide la marca.

Hyperframes acepta esa nueva división del trabajo y la materializa en un framework: la herramienta es para el agente, la dirección es para el humano. Por eso instala skills oficiales antes de pedirte que escribas una sola línea.

Las cinco skills oficiales

Una skill en este contexto es un conjunto de instrucciones formato SKILL.md que el agente carga en su contexto. Hyperframes publica cinco:

• hyperframes: enseña al agente a escribir composiciones HTML y timelines GSAP.
• hyperframes-cli: cubre todos los comandos de la CLI (init, lint, preview, render, transcribe, tts).
• hyperframes-registry: gestiona el catálogo de bloques reutilizables.
• gsap: referencia completa de GSAP (timelines, easings, plugins).
• website-to-hyperframes: convierte una URL en un vídeo completo.

Se instalan con npx skills add heygen-com/hyperframes. Compatibles con cualquier agente que respete el estándar abierto SKILL.md, lo que en la práctica son más de cuarenta agentes hoy mismo.

Cómo es el flujo real con un agente

Lo más interesante de Hyperframes para una agencia técnica como la nuestra no es la CLI. Es el workflow que se materializa cuando se le entrega una skill como website-to-hyperframes.

El flujo, paso por paso, cuando le pides al agente «hazme un vídeo de 15 segundos a partir de esta URL»:

1. Captura web. El agente descarga screenshots, assets y fuentes del sitio objetivo.
2. DESIGN.md. Genera un documento con paleta de colores, tipografías y componentes visuales que ha extraído.
3. SCRIPT.md. Redacta una narración (típicamente 26 palabras para 15 segundos, calibrado para no atropellar).
4. STORYBOARD.md. Dirección beat a beat: qué se muestra en el segundo 0, en el 3, en el 7, en el 12.
5. Composición HTML. Escribe las escenas con sus transiciones y timeline GSAP.
6. Lint y validación. Ejecuta hyperframes lint y hyperframes validate para detectar conflictos y validar contraste WCAG.
7. Render. Genera el MP4 final con hyperframes render.

El ejemplo que documenta el creador del concepto en su artículo de Web Reactiva termina en un MP4 de 15 segundos en 1920×1080, renderizado en 3 minutos y 33 segundos con seis workers paralelos, peso final de 2,1 MB. Sin tocar el resultado intermedio del agente más que para escribir el prompt inicial.

Feedback loop, no oráculo

Conviene no leer Hyperframes como una caja mágica que escupe vídeos al primer intento. La pieza clave es el feedback loop:

1. El agente escribe una composición.
2. hyperframes lint detecta conflictos en el HTML.
3. hyperframes validate analiza el vídeo: contraste, selectores, timing.
4. El agente corrige y repite hasta que pasa todas las validaciones.
5. hyperframes render produce el MP4.

Ese ciclo automatizado de validación es lo que hace que se pueda dejar al agente trabajar sin supervisión constante. Sin él, sería un experimento; con él, es una herramienta de producción.

Catálogo de bloques y plantillas

Una de las razones por las que Hyperframes se siente más maduro de lo que su edad sugiere es el catálogo. Más de cincuenta bloques reutilizables agrupados por familia:

• Social overlays (siete bloques): Instagram Follow, TikTok, Spotify, Reddit, X, YouTube, etc.
• Transiciones WebGL (catorce): Chromatic Split, Glitch, Ripple Waves, Whip Pan, etc.
• Transiciones CSS (trece categorías): 3D, Blur, Dissolve, Grid, Scale, etc.
• Showcases: App Showcase, 3D UI Reveal.
• Data: charts animados.
• Effects: Grain, Pixelate, Shimmer.

Cada bloque se instala con npx hyperframes add <nombre>. Y para empezar, ocho plantillas oficiales hacen el papel de scaffolding: warm-grain, play-mode, swiss-grid, kinetic-type, decision-tree, product-promo, nyt-graph, vignelli en formato vertical y blank para los que prefieren empezar de cero.

Hyperframes vs. Remotion: cuándo elegir cada uno

La duda obvia para cualquier equipo técnico es si vale la pena adoptar Hyperframes existiendo Remotion, que ya es un estándar consolidado con más de 32.000 estrellas en GitHub. La respuesta corta es que resuelven problemas relacionados pero distintos.

Aspecto	Hyperframes	Remotion
Stack	HTML + GSAP	React + TypeScript
Filosofía	«El agente es el usuario»	«La IA ayuda a programar React»
Catálogo	50+ bloques oficiales	Limitado
Captura web → vídeo	Sí, nativa	No por defecto
Tipado	Flexible	Fuerte

Reglas prácticas para elegir:

• Si quieres que el agente haga el 95 % del trabajo y haces vídeos cortos para redes sociales, marketing o producto: Hyperframes.
• Si tu equipo vive en React, necesitas lógica de datos compleja o requieres tipado fuerte: Remotion.

No es excluyente: hay equipos que usan Remotion para piezas de producto largas con datos en tiempo real, y Hyperframes para producción semanal de redes sociales.

Casos de uso para ecommerce y marca

Lo que vemos en nuestros clientes —agencias, marcas de Shopify, ecommerce técnico— es que la producción audiovisual cuesta caro o se hace mal. Las plantillas de Canva quedan amateur, la producción profesional sale por miles de euros y los agentes de IA generativa tipo Sora aún producen resultados poco fiables para piezas de marca.

Hyperframes encaja en cuatro casos concretos:

• Promociones de producto. Plantilla product-promo + datos del catálogo Shopify (vía API) → vídeo de 10-15 segundos por producto en menos de cuatro minutos.
• Reels de blog para redes sociales. URL del post → vídeo de 20 segundos con website-to-hyperframes.
• Lower thirds y bumpers para vídeos de equipo (entrevistas, demos internas), con identidad visual unificada.
• Datos animados para reports y casos de estudio: gráficos animados en HTML que respetan la guía de estilo del cliente.

En todos los casos, el cambio importante no es que la IA «cree el vídeo». Es que el coste marginal de producir una pieza más cae casi a cero, lo que rompe el cuello de botella tradicional del marketing audiovisual: hacer pocas piezas grandes en lugar de muchas pequeñas.

Limitaciones reales

Conviene dejar claras las restricciones actuales para no proponer Hyperframes para algo que no resuelve:

• TTS solo en inglés de momento (Kokoro-onnx). Para narración en castellano hay que integrar un servicio externo (ElevenLabs es la opción obvia) o usar formato sound-off con captions como narrativa.
• Captura web requiere URL: no admite PDFs ni vídeos directamente. Para esos casos hay que pasar por una página HTML intermedia.
• Es un proyecto joven. Estable, pero el catálogo y las skills van a evolucionar rápido. Lo que hoy son cinco skills, en seis meses pueden ser quince.
• No sustituye al humano. Sigue haciendo falta dirección: tono, ritmo, criterio de marca, decisión sobre qué merece existir como vídeo. Esa parte no se delega.

Cómo lo estamos probando en Pango Studio

Llevamos varias semanas probando Hyperframes en piezas internas: presentaciones de producto, reels de casos de estudio, intros de propuestas comerciales. Lo metemos dentro del flujo que ya teníamos con nuestro Tech Lab: las skills oficiales más prompts internos calibrados para nuestra guía de estilo.

El aprendizaje principal hasta ahora: el primer 60 % del trabajo lo hace el agente; el último 40 % es dirección humana. Iterar rápido el storyboard antes de renderizar ahorra horas. Si el storyboard del agente ya resulta flojo, no merece la pena llegar al render.

Nos encaja especialmente bien para clientes con catálogos grandes en Shopify que quieren producción semanal de piezas cortas para Reels, Shorts y TikTok. La automatización del pipeline más la integración con la API de Shopify permite generar de forma escalable lo que antes era un cuello de botella creativo.

Cómo arrancar tú mismo esta tarde

Si quieres probar Hyperframes sin más teoría, este es el camino más corto:

1. Instala una plantilla: npx hyperframes init demo --example play-mode.
2. Abre el directorio en tu agente preferido (Claude Code, Cursor, OpenCode, etc.).
3. Carga las skills oficiales: npx skills add heygen-com/hyperframes.
4. Prompt inicial: «Usando /hyperframes, cambia el texto por «Hola mundo» y haz el bloque dorado».
5. Previsualiza: npx hyperframes preview.
6. Itera conversacionalmente: «Hazlo más grande», «modo oscuro», «añade un lower third con la fecha».
7. Render final: npx hyperframes render --output final.mp4.

En menos de una hora deberías tener un MP4 que pasa el listón básico de marca. Y a partir de ahí, el coste de producir el segundo, el tercero y el centésimo es marginalmente cercano a cero.

Preguntas frecuentes sobre Hyperframes y vídeo con IA

¿Hyperframes sirve para vídeos largos?

Está optimizado para piezas cortas (típicamente entre 6 y 60 segundos). Para vídeos de varios minutos con narrativa compleja, Remotion sigue siendo mejor opción, sobre todo si necesitas tipado fuerte y lógica de datos.

¿Qué agentes de IA son compatibles con Hyperframes?

Cualquier agente que soporte el estándar abierto SKILL.md. En la práctica: Claude Code, OpenCode, Codex, Cursor, Gemini CLI y unos cuarenta agentes más. La portabilidad de skills entre agentes es uno de los grandes argumentos del proyecto.

¿Necesito saber GSAP para usarlo?

Si vas a dirigir, no. El agente conoce GSAP. Tú solo necesitas vocabulario natural: «smooth», «snappy», «bouncy», «hype-style». El agente traduce a easings y curvas concretas (power2.out, power4.out, back.out, etc.).

¿Se puede integrar con datos de Shopify, WooCommerce u otros catálogos?

Sí. Las composiciones son HTML, así que se pueden inyectar datos desde cualquier API antes del render. Es uno de los casos donde una agencia técnica añade valor: orquestar el pipeline catálogo → vídeo → publicación automática.

¿Qué pasa con el TTS en español?

El TTS interno (Kokoro-onnx) hoy solo soporta inglés. Para castellano se integra un servicio externo como ElevenLabs o se opta por formato sound-off con captions, que en redes sociales suele rendir mejor de todos modos porque la mayoría del consumo es con sonido apagado.

¿Es Hyperframes una alternativa a HeyGen como producto SaaS?

No, son cosas distintas. HeyGen vende avatares y vídeo generado a partir de prompts; Hyperframes es una herramienta de bajo nivel para componer vídeos por código con control total. HeyGen lo libera, paradójicamente, como apuesta por el ecosistema agentic-coding.

Conclusión: cuando el agente es el usuario

Lo más interesante de Hyperframes no es la herramienta en sí. Es la decisión de diseño que la sostiene: asumir que el usuario principal del software ya no es un humano, sino un agente de IA dirigido por un humano. Esa decisión cambia decisiones técnicas concretas (HTML antes que React, CLI no interactiva antes que GUI rica, skills antes que documentación) y abre una vía de adopción muy distinta.

Para una agencia técnica como Pango Studio, herramientas como esta cierran un círculo que llevábamos abierto con la IA aplicada al ecommerce: el contenido escrito ya se automatiza, las imágenes también, y ahora el vídeo entra en el mismo régimen. El que diferencia es quien sabe dirigir, no quien sabe ejecutar.

Si tienes una tienda Shopify, una marca con producción audiovisual recurrente o un proyecto que se beneficiaría de un pipeline catálogo → vídeo → publicación, hablamos. En Pango llevamos meses probando exactamente este tipo de flujos para clientes B2C y B2B.