Hyperframes: crea vídeos escribiendo HTML, CSS y JavaScript
HTML que se convierte en vídeo
Hay ideas que, en cuanto las ves, piensas “¿cómo no existía esto antes?”. Hyperframes es una de ellas. Es una herramienta de código abierto de HeyGen que te deja crear vídeos escribiendo HTML, CSS y JavaScript: exactamente el mismo lenguaje con el que se hace una página web.
En vez de abrir un editor de vídeo y pelearte con una línea de tiempo, capas y fotogramas clave a ratón, describes la escena con código (o se lo pides a tu asistente de Inteligencia Artificial) y Hyperframes lo convierte en un MP4 de verdad. Es lo que se llama “vídeo como código”, y para quien venga del mundo web es comodísimo. Vamos a verlo.
Qué es y cómo funciona
La idea de fondo: tú escribes una composición en HTML/CSS/JS, como una web, pero pensada para moverse en el tiempo. Hyperframes la captura fotograma a fotograma y la exporta como un vídeo MP4 real, en 1080p, renderizado en tu propia máquina y pixel a pixel igual cada vez (determinista, que dicen los técnicos).
Lo potente es lo que puedes meter dentro, porque es web pura: animaciones con CSS, librerías como GSAP, Lottie, Three.js o Anime.js, datos, gráficos… Todo lo que sabes hacer para una web, ahora se convierte en un vídeo. Sirve para vídeos de producto, clips para redes, explicativos animados, visualizaciones de datos, subtítulos, rótulos y demás.
Y un detalle que me gusta: al ser código, un vídeo es reproducible y versionable. Cambias un dato y rerenderizas; tienes el “fuente” del vídeo en texto, no atrapado en un proyecto propietario de un editor concreto.
La parte que lo hace brutal: lo monta la Inteligencia Artificial
Aquí está el giro que lo conecta con todo lo que vengo contando. Hyperframes se instala como un skill para agentes de código: Claude Code, Cursor, Gemini CLI, Codex y otros que soporten skills.
¿Qué significa esto? Que no tienes ni que escribir tú el HTML. Le pides a tu asistente “hazme un vídeo explicando esto, con estos datos y este estilo”, y el agente planifica el vídeo, escribe el HTML válido, conecta las animaciones, añade el contenido, lo previsualiza y lo renderiza, todo con un puñado de comandos (típicamente algo como init, preview y render). La Inteligencia Artificial hace el trabajo de vídeo escribiendo código, que es justo en lo que es buena.
Es un ejemplo perfecto de lo que comentaba en el post sobre los Agent Skills: en lugar de un editor de vídeo con mil botones, le das al agente una habilidad concreta y un bucle para verificar (previsualizar antes de renderizar) y deja que lo monte él.
Código abierto y sin peajes
Otro punto a favor: Hyperframes es código abierto con licencia Apache 2.0, sin tarifas por render ni umbrales de uso comercial. Te lo instalas, lo usas y renderizas en tu equipo lo que quieras, sin que un contador te vaya sumando céntimos por vídeo. Para quien hace contenido a menudo, eso es oro.
Eso sí, seamos realistas con qué es y qué no: no es un sustituto del editor de vídeo para todo. Para montar metraje grabado, cortar tomas y ese tipo de edición clásica, sigue mandando el editor de siempre. Hyperframes brilla en lo generado y animado por código: explicativos, gráficos en movimiento, plantillas que cambian con datos, clips repetitivos que quieres producir en serie. Para eso, es una pasada.
Un ejemplo de lo que puedes hacer
Para aterrizarlo, piensa en un caso típico: un vídeo explicativo corto para redes con tu logo, un par de gráficos que se animan y un texto que aparece encima. A mano, en un editor de vídeo, eso es media tarde de capas, fotogramas clave y exportaciones. Con Hyperframes le describes a tu agente lo que quieres, este escribe el HTML con las animaciones, lo previsualizas y lo renderizas. Y si mañana cambian los datos del gráfico, no rehaces el vídeo entero: cambias el dato en el código y vuelves a renderizar. Para quien produce contenido a menudo, esa diferencia de tiempo es brutal.
Donde más brilla es en las plantillas. Imagina que haces el mismo tipo de clip cada semana (un resumen, un ranking, una ficha de producto) cambiando solo los datos. Con vídeo como código, montas la plantilla una vez y luego generas decenas de variantes solo cambiando la entrada. Eso es automatización de vídeo de verdad, no copiar y pegar en un editor. Y como todo es código, lo versionas con git, lo compartes con tu equipo y lo mantienes y mejoras como cualquier otro proyecto. El vídeo deja de ser un archivo opaco atrapado en un programa y pasa a ser algo que entiendes, revisas y reutilizas.
Lo que me llevo de todo esto
Hyperframes me parece una de esas herramientas que apuntan hacia dónde va todo: convertir tareas creativas en algo que la Inteligencia Artificial puede hacer escribiendo código, con un bucle para verificar el resultado. “Vídeo como código” suena raro hasta que lo pruebas y ves que, para cierto tipo de vídeos, tiene todo el sentido.
Si te manejas con HTML y CSS, o si simplemente usas un asistente de código, échale un ojo. Que sea abierto y gratis quita cualquier excusa para no probarlo. Y si haces vídeos explicativos o gráficos animados a menudo, igual acabas de encontrar tu nueva herramienta favorita.
Preguntas frecuentes
¿Qué es Hyperframes?
Es una herramienta de código abierto de HeyGen que permite crear vídeos escribiendo HTML, CSS y JavaScript, en lugar de usar un editor de vídeo tradicional. Captura la composición fotograma a fotograma y la exporta como un MP4 real en 1080p, renderizado localmente. Es lo que se conoce como “vídeo como código”.
¿Puede la Inteligencia Artificial crear el vídeo por mí con Hyperframes?
Sí. Hyperframes se instala como skill para agentes de código como Claude Code, Cursor, Gemini CLI o Codex. Le pides el vídeo que quieres y el agente planifica la composición, escribe el HTML, conecta las animaciones, lo previsualiza y lo renderiza, normalmente con unos pocos comandos. No necesitas escribir tú el código si no quieres.
¿Hyperframes es gratis?
Sí, es código abierto con licencia Apache 2.0, sin tarifas por render ni umbrales de uso comercial. Te lo instalas y renderizas en tu propio equipo los vídeos que quieras sin coste por vídeo. Eso lo hace especialmente atractivo para quien produce contenido con frecuencia.
¿Sustituye a un editor de vídeo normal?
No para todo. Hyperframes brilla en vídeos generados y animados por código: explicativos, gráficos en movimiento, visualizaciones de datos o clips que se producen en serie a partir de plantillas. Para editar metraje grabado, cortar tomas y la edición clásica de vídeo, sigue siendo mejor un editor tradicional. Son herramientas complementarias.
Fuentes
Compártelo si te ha resultado útil, sobre todo con quien sufra editando vídeos explicativos a mano.
¿Le ves uso al “vídeo como código” o prefieres tu editor de siempre? Cuéntame.
Y… si sabes hacer una web, acabas de aprender a hacer vídeos.
Artículos relacionados
Open Notebook: la alternativa self-hosted y abierta a NotebookLM
NotebookLM es maravilloso: subes documentos, papers o hasta código y los consultas, resumes y conviertes en podcast. Pero hay una parte que a nadie le gusta: tienes que subir todo eso a Google. Open Notebook es la respuesta de la comunidad: una alternativa self-hosted y privacy-first, con más de 27.000 estrellas en GitHub, que te da una experiencia parecida a NotebookLM pero ejecutándose en tu propio servidor, con control de verdad sobre tus datos. Aquí te cuento qué es, en qué se parece y en qué se diferencia de NotebookLM, qué control extra te da por ser de código abierto y para quién tiene sentido montárselo, porque no es para todo el mundo: la privacidad y el control se pagan en tiempo de instalación y mantenimiento.
Cal.com: que otros agenden reuniones contigo sin correos
El baile de correos para cuadrar una reunión es una de las pérdidas de tiempo más absurdas que existen. ¿Te viene bien el martes? No, mejor el jueves. ¿A las 10? Uf, tengo otra cosa. Cal.com mata ese baile: compartes un enlace, la otra persona ve tus huecos reales y reserva. Y lo bueno es que no es un único enlace tonto, sino que puedes tener varios endpoints, cada uno con su duración, su horario y hasta su precio si quieres cobrar por la llamada. Pone buffers entre reuniones y te deja exigir antelación mínima para que nadie te agende en el último minuto. Se sincroniza con TODOS tus calendarios de Google, es de código abierto y el plan individual es gratis de verdad. Te cuento cómo lo uso yo para que terceros agenden reuniones conmigo sin un solo correo de ida y vuelta.
⚡ Por qué deberías usar pnpm en vez de npm y migrar hoy mismo
Llevo años viendo discos llenos de carpetas node_modules clonadas mil veces y esperas eternas en cada npm install. pnpm resuelve las dos cosas: guarda cada dependencia una sola vez en disco y enlaza por hard links, instala en una fracción del tiempo y te protege de las phantom dependencies. Te cuento por qué deberías cambiarte, qué tiene de truco y cómo dejar que tu memoria muscular siga escribiendo npm con un alias que funciona en todos los sistemas operativos.