HyperFrames: el framework de HeyGen para que tu agente de IA haga vídeos escribiendo HTML

Esta es la entrega GH·6 de 7 de la serie «Top GitHub de la semana», con los repos que más estrellas ganaron en GitHub Trending (todos los lenguajes) la semana que acabó el 25 de octubre de 2026. Los datos de estrellas son de ese día, consultados a las 07:55; en GitHub cambian a diario.

La sexta es de HeyGen, la empresa de los avatares: HyperFrames, con 5.633 estrellas en esa semana y 71.620 en total a esa fecha. Su lema es «Write HTML. Render video. Built for agents.». Escribes HTML, sale vídeo, y está pensado para que quien escriba ese HTML sea tu agente de IA.

Repositorio oficial, que es la fuente de todo lo que cuento aquí: github.com/heygen-com/hyperframes.

Lo he usado, y así fue

En agosto lo probé para convertir la web de Adrihosan, mi tienda de reformas, en un vídeo de presentación. Le di la web a Claude Code con las skills de HyperFrames y salió un proyecto con su guion, su storyboard, la locución y las escenas montadas con capturas reales de la tienda. Hubo tres rondas de revisión antes del render final. Desde entonces el editor de reels de Adrihosan lo usa para las animaciones de texto y los rótulos.

Lo que me convenció es que todo es HTML que se puede leer y retocar. Si un rótulo no te gusta, cambias una línea y vuelves a renderizar. No dependes de mover cosas a mano en un editor de vídeo.

Qué es exactamente

Según su README, un framework open source que convierte HTML, CSS, multimedia y animaciones en vídeos MP4 deterministas. Determinista quiere decir que el mismo proyecto da siempre el mismo vídeo, fotograma a fotograma. Se puede usar desde la terminal, desde agentes de programación con skills o como motor de render de otras herramientas. Para ver qué sale, tienen un showcase con vídeos terminados que puedes ver, leer y remezclar.

Cómo se instala en Claude Code

Como plugin, dos comandos:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Para otros agentes, incluido OpenCode, el README indica las skills sueltas con npx skills add heygen-com/hyperframes. Pide Node.js 22 o superior y FFmpeg instalado. Si no usas agentes, también va solo con la terminal: npx hyperframes init, luego preview para verlo en el navegador y render para sacar el MP4.

Publican siete skills. El núcleo son cuatro: /hyperframes, que va primero y lleva las reglas; la de la terminal; un registro de unos 450 bloques ya hechos (transiciones, rótulos, gráficos, mapas); y una para conseguir o generar el material, sea música, voz, imágenes o avatar. Las otras, /slideshow, /figma y /remotion-to-hyperframes, se instalan cuando las necesitas.

Qué le pides

El ejemplo del README es una intro de producto de diez segundos con el título apareciendo en fundido, un vídeo de fondo y música suave. Por ahí van los tiros: vídeos de lanzamiento, explicaciones de un cambio en el código con el diff animado, gráficos de datos, vídeos para redes con rótulos en movimiento o pasar un PDF o una web a vídeo.

Un consejo de quien ya se ha peleado con ello: los vídeos con mucho texto animado necesitan revisión de ritmo. El agente puede dejar un plano quieto demasiado tiempo, y en redes eso se paga. Revisa cada versión entera antes de darla por buena.

Si lo tuyo es el vídeo con IA en general, tengo mi método para convertir un documento denso en vídeo. Y si quieres verte tú en pantalla sin grabarte, cómo crear un avatar con IA.

Preguntas frecuentes