HyperFrames: así es el framework de GitHub que convierte HTML en video con un agente de IA
Un proyecto de código abierto llamado HyperFrames pasó de 64,913 a 70,582 estrellas en GitHub en una semana. Convierte HTML y CSS en video MP4 real, siempre que un agente de código lo maneje.
Qué es, en qué punto está y qué significa para un negocio que hoy paga por editar video
Un repositorio de código abierto que ya suma 70,582 estrellas convierte HTML y CSS en video MP4 con ayuda de un agente de IA. Esto es lo que hace, lo que pide y lo que significa para un negocio en México.
HyperFrames es un framework de código abierto que convierte código HTML, CSS y medios en video MP4 real, usando un agente de inteligencia artificial para escribir ese código y disparar el render. Esta semana el repositorio heygen-com/hyperframes en GitHub sumó 5,669 estrellas nuevas y llegó a 70,582, señal de que el proyecto se está usando, no solo mirando. Aquí explicamos qué es, en qué punto está, qué pide para funcionar y qué significa para un negocio en México o Latinoamérica que hoy paga una suscripción de edición de video.
En resumen
HyperFrames ya está disponible hoy, con licencia Apache 2.0, en el repositorio heygen-com/hyperframes de GitHub, que sumó 5,669 estrellas en una semana hasta llegar a 70,582. No es un botón para cualquiera: pide Node.js 22 o superior, FFmpeg y un agente de código como Claude Code, Codex o Cursor que escriba el HTML y dispare el render. Una vez configurado, genera video a partir de una sola instrucción de texto.
- Código abierto, licencia Apache 2.0, ya disponible para instalar
- 70,582 estrellas en GitHub, +5,669 en una semana
- Pide Node.js 22+, FFmpeg y un agente de código
- El README no confirma soporte en español ni requisitos de GPU
Qué es HyperFrames y en qué punto está
HyperFrames se describe a sí mismo en GitHub como "Write HTML. Render video. Built for agents.": escribe HTML, renderiza video, hecho para agentes. Es un framework de código abierto, publicado en el repositorio heygen-com/hyperframes, que convierte HTML, CSS, medios y animaciones navegables en archivos de video MP4 deterministas. Se puede usar localmente con una CLI (interfaz de línea de comandos), desde agentes de código con "skills" (habilidades instalables), o como motor de render detrás de flujos de creación alojados.
No es un anuncio ni una beta cerrada: el repositorio tiene documentación de instalación, comandos de CLI funcionando, un archivo de licencia Apache 2.0, una política de seguridad y hasta un listado de adoptantes (ADOPTERS.md). Es decir, ya es un proyecto público que cualquiera puede clonar, instalar y usar hoy mismo; lo que no es, según su propia documentación, es una herramienta de un clic para quien no sabe nada de código.
El salto de la semana
Según los datos reportados esta semana, HyperFrames sumó 5,669 estrellas nuevas en GitHub hasta llegar a 70,582, con 6,400 forks (copias del repositorio) y 182 personas vigilando los cambios del proyecto.
Cómo funciona: de HTML a video MP4
El proceso parte de definir el video como una página HTML: se agregan atributos de datos para marcar tiempos y pistas, y se usan animaciones con GSAP (una librería de animación) o CSS para controlar el movimiento cuadro por cuadro. Un agente de código sigue ese mismo patrón para planear la pieza, escribir el HTML, conectar los medios y finalmente pedir el render, que se procesa con FFmpeg, el motor que convierte esa página animada en un archivo MP4.
Planea el video
El agente decide escenas, duración y qué piezas de la plantilla HTML necesita según la instrucción de texto que le diste.
Escribe el HTML animado
Convierte el plan en HTML y CSS con animaciones controlables (por ejemplo con GSAP) y conecta música, voz o imágenes.
Renderiza el MP4
FFmpeg toma esa página animada y la convierte en el archivo de video final, listo para publicar.
HyperFrames se instala con 7 "skills" (habilidades) que le enseñan al agente ese mismo flujo. El set principal cubre el trabajo del día a día; tres skills adicionales se instalan solo cuando hacen falta.
| Skill | Para qué sirve |
|---|---|
| /hyperframes | Explica el contrato de render y el flujo de trabajo para crear, editar, animar o renderizar cualquier video. |
| /hyperframes-cli | Maneja la CLI: crear proyecto, vista previa, render local o en la nube, publicar y recuperar errores. |
| /hyperframes-registry | Da acceso a cerca de 450 bloques ya hechos: transiciones, textos animados, gráficas, mapas y más. |
| /media-use | Consigue o genera música, efectos de sonido, voz e imágenes para el video, con HeyGen o herramientas locales gratuitas. |
| /figma | Convierte diseños de Figma en video, con tokens de marca y storyboards reconstruidos como movimiento. |
| /slideshow | Genera presentaciones navegables (no un MP4), con diapositivas y notas de orador. |
| /remotion-to-hyperframes | Migra código de video existente (Remotion, Motion Canvas, Lottie, Three.js) a HyperFrames, cuadro por cuadro. |
Licencia, requisitos e instalación
HyperFrames tiene licencia Apache 2.0, publicada en el propio repositorio. Es una licencia de código abierto permisiva: se puede usar, modificar y adaptar el código libremente, incluso con fines comerciales, sin pagar regalías por ello.
No es para cualquiera, todavía
Para correrlo necesitas, según el README del proyecto, Node.js 22 o superior y FFmpeg instalados, además de un agente de código que soporte "skills": Claude Code, Codex, Cursor, Gemini CLI, IBM Bob u otro agente compatible. Si nadie en tu equipo maneja la terminal, la primera configuración va a requerir ayuda externa.
Para usarlo con Claude Code, la instalación es por plugin: claude plugin marketplace add heygen-com/hyperframes y luego claude plugin install hyperframes@hyperframes. Para otros agentes compatibles con "skills" (incluido OpenCode), el comando es npx skills add heygen-com/hyperframes. También se puede usar de forma manual, solo con la CLI, sin pasar por un agente de código.
npx hyperframes init my-video cd my-video npx hyperframes preview npx hyperframes render
Crea el proyecto
Corre npx hyperframes init my-video para generar la estructura base del video.
Ábrelo en vista previa
Con npx hyperframes preview ves los cambios en el navegador con recarga automática mientras editas el HTML.
Renderízalo a MP4
El comando npx hyperframes render genera el archivo de video final usando FFmpeg.
Para qué le sirve a un negocio
Según el propio repositorio, HyperFrames se usa hoy para videos de lanzamiento de producto, recorridos de cambios de código con animaciones, visualizaciones de datos (gráficas y animaciones de mapas), video social con subtítulos animados y música, conversión de documentos o sitios web en video explicativo, y piezas de motion graphics reutilizables dentro de flujos de contenido automatizados. El catálogo del proyecto (el "registry") ofrece cerca de 450 bloques ya hechos —transiciones, textos animados, gráficas, mapas, movimientos de cámara— que se instalan como código editable en vez de construirse desde cero.
Videos de producto
Intros y anuncios de lanzamiento con un prompt de texto, sin pagar a un editor por cada versión.
Contenido repetible
Reels y anuncios cortos reutilizando la misma plantilla HTML con datos distintos cada vez.
Para agencias
Automatizar los videos de varios clientes a la vez, con la misma plantilla y datos distintos por cuenta.
Visualización de datos
Gráficas animadas y animaciones de mapas generadas directamente a partir de HTML y CSS.
Qué significa para México y Latinoamérica
La promesa concreta para un negocio en México o Latinoamérica es reemplazar una suscripción de edición de video o motion graphics con un prompt de texto, siempre que alguien con algo de experiencia técnica lo configure la primera vez. Eso aplica tanto a una agencia de marketing que produce videos para varios clientes, como a un SaaS que necesita demos de producto, un equipo de soporte que graba explicaciones en video, o una tienda en línea que necesita anuncios cortos cada temporada.
Ejemplo ilustrativo: agencia con varios clientes
Es un escenario hipotético para mostrar cómo aplicaría la herramienta, no un caso documentado por HyperFrames ni por GitHub.
- Define primero qué video quieres antes de escribir el HTML: el agente sigue instrucciones, no adivina.
- Asigna a alguien con experiencia en Node.js y la terminal para la configuración inicial.
- Prueba con un video corto antes de automatizar el flujo completo de varios clientes.
- Revisa la licencia Apache 2.0 con tu equipo legal si vas a redistribuir el código modificado.
Cuánto podrías ahorrar
Ni HyperFrames ni GitHub publican una cifra de ahorro ni un precio de referencia, porque el framework en sí es gratuito y de código abierto. Lo que sí varía negocio por negocio es cuántos videos produces al mes y cuánto pagas hoy por cada uno a un editor o agencia. La siguiente calculadora usa cifras de ejemplo que puedes ajustar a tu caso.
Estimador de ahorro frente a edición manual
Cifras de ejemplo, no reportadas por HyperFrames ni por GitHub: ajusta los valores a lo que realmente pagas hoy.
Cifras de ejemplo para ilustrar el cálculo. El ahorro real depende de las horas que tome configurar y mantener el agente de código, que no están reportadas por el proyecto.
Lo que todavía no está confirmado
Lo que el README no confirma
El README del proyecto no confirma si HyperFrames funciona en español, ni qué tan exigente es en cuanto a tarjeta de video (GPU), aunque sí usa FFmpeg para renderizar. Tampoco hay, en lo revisado, precios o tiempos de implementación publicados por el proyecto. Y sigue sin ser una herramienta de un clic: pide Node.js, FFmpeg y un agente de código configurado correctamente.
Preguntas frecuentes
¿Qué es HyperFrames?
Es un framework de código abierto que convierte HTML, CSS y medios en archivos de video MP4, usando un agente de inteligencia artificial para escribir el código y disparar el render.
¿HyperFrames ya se puede usar o solo se anunció?
Sí, ya se puede instalar y usar hoy: el repositorio heygen-com/hyperframes en GitHub tiene licencia Apache 2.0, documentación de instalación y comandos de CLI funcionando, con 70,582 estrellas acumuladas.
¿Necesito saber programar para usar HyperFrames?
Necesitas al menos conocimientos técnicos básicos: instalar Node.js 22 o superior, FFmpeg y configurar un agente de código como Claude Code, Codex o Cursor la primera vez. Después, se puede operar con instrucciones de texto.
¿Cuánto cuesta usar HyperFrames?
El framework en sí es gratuito y de código abierto bajo licencia Apache 2.0; el proyecto no publica un precio. El costo real depende de las horas de configuración y del agente de IA que uses para operarlo, que normalmente sí tiene su propio costo o suscripción.
¿Funciona en español?
No está confirmado en el README del proyecto: no se menciona explícitamente el soporte de idioma para los textos o voces generadas.
¿Qué agentes de código son compatibles con HyperFrames?
Claude Code, Codex, Cursor, Gemini CLI e IBM Bob, además de otros agentes de código que soporten "skills", según el README del proyecto.
¿Quieres ver HyperFrames funcionando con tu marca?
En Zadrig Technology te mostramos cómo configurar herramientas de código abierto como HyperFrames y conectarlas a tu flujo de contenido, sin que tengas que aprenderlo por tu cuenta.
Escríbenos por WhatsApp
