https://www.youtube.com/embed/vJ8rgCjkjUo?feature=oembed
En este artículo te voy a enseñar exactamente qué es y cómo funciona Hyperframes y cómo puedes empezar a usar tú también el sistema capaz de hacer motion graphics con IA.
Qué es Hyperframes
HyperFrames es un framework open source que ha lanzado HeyGen, que te permite crear composiciones de vídeo usando HTML. Sí, la misma tecnología con la que se hacen páginas web.
¿Por qué importa eso? Porque los modelos de IA como Claude ya saben escribir y animar HTML perfectamente. Así que en lugar de tener que aprender una herramienta motion graphics, simplemente le describes al agente lo que quieres ver en pantalla, y él genera el código que produce esas animaciones.
El flujo es este: tú tienes un vídeo. HyperFrames lo usa como fondo. Encima añade motion graphics, títulos, transiciones, subtítulos… todo sincronizado al milisegundo con lo que estás diciendo. Y al final lo renderiza todo junto en un MP4.
Lo más importante: es completamente gratuito y open source. No hay suscripciones, ni coste por uso, el único límite es el plan que tengas contratado con tu IA favorita.
Instalación de Hyperframes
Antes de nada, aviso a navegantes: si no te llevas muy bien con la consola de comandos quizá esto no es para ti, aunque lo bueno es que la parte de comandos es algo que solo tienes que hacer una vez. En resumen, no es para todos los públicos pero el resultado creo que vale la pena. Además, en estos tiempos frenéticos de IA agéntica no está de más perderle el miedo a la consola.
Para instalarlo necesitas dos cosas: Node.js y FFmpeg, y por supuesto uno de los sistemas operativos con los que es compatible: WIndows, Macos o Linux.
En Windows, Node.js lo instalas con el siguiente comando:
winget install OpenJS.NodeJS.LTS
FFmpeg en Windows lo más fácil es con winget:
winget install Gyan.FFmpeg
En Mac con Homebrew:
brew install ffmpeg
Y en Linux depende ya de tu instalación, aunque las más punteras suelen traer estos entornos
Seguidamente vamos a asegurarnos de que está todo bien instalado con estos dos comandos:
npx –version
Npx es el gestor de paquetes de node.js. Si te muestra la versión instalada es que todo está bien.
y
ffmpeg -version
Cuando tengas los dos instalados, creas tu primer proyecto así:
npx hyperframes init mi-proyecto –human-friendly
Te va a preguntar qué ejemplo quieres usar como base. Para empezar puedes lanzar el de warm-grain, que ya viene con vídeo, texto animado y música para que puedas ver cómo funciona todo desde el primer momento. Y para ver tu composición en el navegador:
npx hyperframes preview
Se abre el studio en localhost:3002 y ya tienes el editor visual delante, una especie de mini DaVinci Resolve en tu navegador.
Cómo funciona por dentro
Antes de meternos en el funcionamiento con el agente, quiero que entiendas qué está pasando realmente.
Cuando HyperFrames genera un vídeo, lo que hace es tomar un archivo HTML con anotaciones especiales, abrir Chrome en modo invisible frame a frame, y capturar cada fotograma como si fuera una foto. Luego FFmpeg ensambla todas esas fotos en un MP4 o un MOV.
¿Por qué es importante entender esto? Porque significa que lo que puedes hacer es básicamente ilimitado. Si puedes construirlo en HTML y CSS, puedes animarlo con GSAP, que es la librería de animación más potente que existe para web, y HyperFrames lo convierte en vídeo.
Transiciones, partículas, gráficos de datos animados, liquid glass, texto karaoke sincronizado con el audio… todo eso es posible porque en el fondo es solo HTML. Vamos, como tener un Cavalry pero con la precisión extrema (y la dificultad, claro) que te da el código.
El flujo con Claude Code
Y si has entendido lo anterior y estás al tanto del mundillo IA seguro que te estarás preguntando “¿y esto me lo puede hacer la IA?” Pues la respuesta es que sí. Porque en lugar de editar ese HTML a mano, le puedes decir a Claude Code lo que quieres y él lo genera.
Primero instalas Claude Code. En Windows, como siempre, lanzamos PowerShell y:
npm install -g @anthropic-ai/claude-code
En Mac y Linux:
curl -fsSL https://claude.ai/install.sh | bash
Entras en tu proyecto:
cd mi-proyecto
claude
Conectas tu cuenta de Claude o la IA que uses (recuerda que puedes usar cualquiera que tenga API) y ya estás dentro. Lo primero que tienes que hacer es instalar los skills de HyperFrames, que son básicamente instrucciones que le enseñan a Claude cómo funciona el framework. Dentro de Claude lanza:
npx skills add heygen-com/hyperframes
Y el solito instalará los componentes. Una vez instalados, tienes disponibles los slash commands, es decir, puedes escribir /hyperframes con el prompt que quieras darle.
Por ejemplo, si tienes un vídeo llamado intro.mp4 con narración, le dices algo así:
Tengo un vídeo en assets/intro.mp4. Primero transcríbelo. Luego crea una composición donde el vídeo queda como fondo y los motion graphics reflejan lo que estoy diciendo. Quiero títulos animados sincronizados con la narración, estilo liquid glass, fondo oscuro.
Claude Code lee el vídeo, genera la transcripción con Whisper, planifica las escenas y empieza a escribir el HTML. Puedes verlo en tiempo real en el preview del navegador.
Cuando el resultado te convence, renderizas:
npx hyperframes render –output final.mp4
Y tienes tu vídeo listo.
Cómo editar lo ya creado
Hay tres vías según lo que quieras editar.
1. Editar directamente en el timeline del studio. Con npx hyperframes preview tienes el editor visual en el navegador. Desde ahí puedes mover elementos en el timeline, cambiar duración, reordenar escenas, eliminar elementos. Los cambios se reflejan automáticamente en el HTML del proyecto.
2. Editar el HTML directamente. Cada composición es un archivo .html en la carpeta compositions/. Lo abres con cualquier editor, modificas lo que quieras (posición, colores, textos, timing de animaciones GSAP) y el preview se recarga solo. ¡Solo para aventureros y expertos!
3. Decirle a Claude Code que lo cambie. La vía más cómoda para cambios complejos. Con Claude Code abierto en el proyecto le describes el cambio. No te preocupes, que él se encarga de solucionar todos los errores que surjan
Lo que no puedes editar visualmente todavía es el timing de las animaciones GSAP con precisión, eso sigue requiriendo tocar el código o pedírselo a Claude. El timeline del studio mueve clips pero no expone los parámetros internos de GSAP. Además, a día de hoy la interfaz es muy básica y se rompe con facilidad, pero al menos puedes tirar los renders fácilmente.
Lo mejor y lo peor de Hyperframes
Y visto este ejemplo, lo mejor sin duda de Hyperframes es que de repente borramos de un plumazo la necesidad de aprender After Effects o Cavalry para generar gráficos en movimiento. Es algo que la IA está haciendo cada vez mejor y, en estos tiempos en los que necesitamos crear vídeos llenos de animaciones y estímulos para mantener la retención, cargar tu vídeos de motion graphics con acabado profesional es algo imprescindible.
Pero Hyperframes, al menos en su estado actual, tiene algunos inconvenientes:
- El primero es su relativa lentitud. Composiciones de menos de 30 segundos le lleva en torno a 25 minutos. Si vas a hacer muchas al cabo del día te va a llevar bastante tiempo. O eso, o automatizas todos los procesos
- El segundo, sin duda, el gasto de créditos de IA. Si no tienes un plan con un límite generoso te lo vas a cargar con tan solo una composición
- Y por último, los gráficos que genera son resultones, pero mi sensación es que aún tienen ese “aroma IA” que les quita mucho encanto. Bajo mi punto de vista está bien para aligerar trabajo, pero no sustituye lo que podemos conseguir dominando programas como Cavalry, After Effects, Fusion o Autograph (este último, por cierto, recién liberado como aplicación gratuita)
Conclusión
Se trata de una herramienta que promete y que, recordemos, acaba de salir y ya puede hacer cosas muy conseguidas. Además, están sacando nueva versión cada día. Se nota que hay respuesta por parte de la comunidad y le están dando un ritmo vertiginoso de actualizaciones, al menos hasta que pase el hype.
Yo me la guardo entre mi set de futuribles herramientas, ¿y tú? ¿Usas esta o alguna otra para crear motion graphics con Inteligencia Artificial? Déjala en los comentarios.
Adquiere las herramientas de trabajo de Creatubers
Equípate para tu proyecto creativo y me ayudarás con una pequeña comisión de afiliado. No pagarás de más, sino que los proveedores dejarán de recibir una pequeña parte para dársela a Creatubers.