⚡ Ryukami Labs

⚡ HyperFrames — HTML que se vuelve vídeo (y agentes que lo editan)

Se lee en 8 min

⚡ HyperFrames — HTML que se vuelve vídeo (y agentes que lo editan)

Qué es y por qué importa

HyperFrames es un framework open source de HeyGen que convierte HTML, CSS y JavaScript en vídeo. Tú describes el vídeo, un agente escribe el proyecto y HyperFrames lo reproduce o lo renderiza a MP4.

  • 💻 Repo / Origen: heygen-com/hyperframes · hyperframes.heygen.com
  • 🛠️ Stack: TypeScript + Node 22 + FFmpeg + Puppeteer/Chrome · licencia Apache-2.0
  • 📊 Tracción: 75.537 ⭐ y 6.873 forks (2026-10-29) · última release v0.8.219

🧠 La idea en tres frases

  1. Lo construye un agente. Describes el vídeo; el agente escribe HTML, CSS y JS. No necesitas tocar código.
  2. Es editable. El resultado es una carpeta de proyecto, no un MP4 cerrado: agente, editor del navegador y tus herramientas trabajan sobre los mismos archivos.
  3. El render es determinista. HyperFrames pide al proyecto cada frame exacto en vez de depender de la reproducción en vivo, así que una máquina lenta no pierde momentos.

El cambio de mentalidad

No es un editor de vídeo con timeline: es una página web que sabe en qué segundo está cada cosa. El tiempo vive en atributos data-*, la animación en CSS/JS y el render lo resuelve Chrome frame a frame. Por eso encaja con agentes: ya saben escribir web.

📋 Ficha técnica

CampoDato
Repoheygen-com/hyperframes
Descripción oficial«Write HTML. Render video. Built for agents.»
LicenciaApache-2.0 (uso comercial permitido)
Estrellas / forks75.537 / 6.873
Creado2026-03-10
Última releasev0.8.219 (2026-10-30 UTC)
RequisitosNode.js 22+, npm y FFmpeg para renderizar
Plataformas StudiomacOS (Apple Silicon, Intel, Universal) · Windows 64-bit · Linux .deb / AppImage
PrecioFramework, CLI, skills y render local: gratis

🚪 Tres formas de usarlo

VíaCómoNecesitasCoste
Studio appApp de escritorio con chat, preview y editor en una ventanaCuenta HeyGen gratisGratis; créditos solo si pides voces/avatares
Tu agentePlugin o skills dentro de tu carpeta de proyectoNode 22+, FFmpeg, un agente con skillsGratis en local
Chat de IAConector alojado (MCP) en Claude.ai o ChatGPTCuenta HeyGen + plan que permita conectoresCréditos HeyGen; pierdes la carpeta local

Studio en Windows ARM

Todavía no hay versión para Windows on Arm. En ese caso: CLI + npx hyperframes preview en el navegador.

🔌 La guía de plugins

Un plugin versionado empaqueta todas las skills de HyperFrames y deja que el gestor del agente las actualice. Las skills se cargan solo cuando hacen falta.

AgenteRuta de instalación
Claude CodeMarketplace de GitHub de HyperFrames
Copilot CLIMarketplace de GitHub de HyperFrames
VS Code / CopilotAñadir el marketplace desde la vista de Extensiones
CursorMarketplace de equipo, o plugin local
Gemini CLIExtensión desde GitHub
CodexPlugin existente; las actualizaciones de directorio van aparte
OpenCodeSkills standalone (no hay plugin)

Claude Code

Instalar, verificar y actualizar 

# Instalación
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
claude plugin details hyperframes
 
# El inventario debe incluir: hyperframes, hyperframes-cli, media-use
# Luego: nueva sesión o /reload-plugins
Using /hyperframes:hyperframes, make a 5-second title card that says "Hello world".
 
# Actualizar / desinstalar
claude plugin update hyperframes@hyperframes
claude plugin uninstall hyperframes@hyperframes

Auto-update: en una terminal del proyecto, claude → /plugin → Marketplaces → hyperframes → Enable auto-update. Los marketplaces de terceros no lo activan por defecto.

GitHub Copilot CLI

Instalación explícita 

copilot plugin marketplace add heygen-com/hyperframes
copilot plugin install hyperframes@hyperframes
copilot plugin list
 
copilot plugin update hyperframes
copilot plugin uninstall hyperframes

No asumas que Copilot CLI comparte el calendario de actualización de VS Code: son explícitas.

VS Code

Vista de Extensiones → buscar @agentPlugins → añadir heygen-com/hyperframes como marketplace → instalar hyperframes → verificar en Agent Customizations. Comprueba actualizaciones cada 24 h si extensions.autoUpdate está activo.

Cursor

  • Marketplace de equipo: Dashboard → Plugins & MCPs → importar heygen-com/hyperframes. El auto-refresh de GitHub necesita la app de Cursor y la opción Enable Auto Refresh.
  • Local: copiar la carpeta del plugin a ~/.cursor/plugins/local/hyperframes (debe tener plugin.json y skills/) y recargar. No se actualiza sola; hay que reemplazarla a mano.

Gemini CLI

Extensión con auto-update 

gemini extensions install https://github.com/heygen-com/hyperframes --auto-update
gemini extensions list
 
gemini extensions update hyperframes
gemini extensions uninstall hyperframes

Para fijar una versión: --ref <release-tag> en vez de --auto-update.

OpenCode y agentes sin plugin

OpenCode no usa el plugin: va con skills standalone. Es la misma ruta para cualquier agente que no tenga gestor de plugins.

Skills standalone (elegir Core Skills en el instalador) 

# Desde la carpeta del proyecto de vídeo
npx skills add heygen-com/hyperframes
 
# Refrescar sin interacción (agentes / CI)
npx hyperframes skills update
 
# Comprobar frescura sin cambiar nada
npx hyperframes skills check
 
# Una skill concreta
npx hyperframes skills update slideshow

El detalle que importa en esta bóveda

Instala HyperFrames en la carpeta del proyecto, no en la raíz de la bóveda. Aquí .agents/skills/ ya sostiene vault-ingest, vault-query y obsidian-scorch-design; meter 7 skills de vídeo ahí ensucia el catálogo y puede pisar nombres. Si quieres conservar una copia editable, cópiala luego a 03_Conocimiento/Skills & Agentes/ como haces con las de Scorch.

🧰 Qué trae el paquete de skills

SkillPara qué
/hyperframesSe lee primero. Contrato de render, bucle de trabajo y referencias de formato, motion, look, audio, storyboard y captions
/hyperframes-cliCLI por tarea: scaffold, check, frames, timeline, preview, render local/nube, publish, historial
/hyperframes-registry~450 bloques editables: transiciones, overlays, títulos, kinetic type, captions, charts, mapas, 3D, cámara
/media-useMúsica, SFX, imágenes, iconos, logos, voz, avatar, vídeo generado, transcripts, cutouts, color
/figmaArchivo o frame de Figma → assets, tokens, componentes y storyboard
/slideshowPresentaciones y decks navegables (no MP4)
/remotion-to-hyperframesMigrar Remotion, Motion Canvas, Lottie, Three.js o canvas, verificado frame a frame

🧱 El proyecto es HTML normal

<div
  id="root"
  data-composition-id="main"
  data-start="0"
  data-duration="10"
  data-width="1920"
  data-height="1080"
>
  <div class="clip" data-start="0" data-duration="10" data-track-index="1">
    <!-- HTML, CSS, imágenes y media con timing -->
  </div>
</div>

HTML y CSS deciden qué se ve; los atributos data-* deciden cuándo. El template del proyecto pone el viewport y la duración.

Flujo de CLI de principio a fin 

npx hyperframes init my-video --example blank
cd my-video
npx hyperframes preview            # editor en el navegador
npx hyperframes check              # valida el proyecto
npx hyperframes render --output video.mp4
 
npx hyperframes doctor             # ¿está FFmpeg y todo listo?
npx hyperframes lint               # reglas de fuentes, etc.
npx hyperframes render --quality draft   # review rápido
npx hyperframes cloud render       # nube de HeyGen (créditos)

💸 Gratis vs. HeyGen

PiezaGratisRequiere cuenta / créditos
Framework, CLI, skills✅ Apache-2.0—
Render local en tu máquina✅ Sin cuenta—
Preview en navegador✅—
Voces y música de HeyGen—Créditos HeyGen (10.000 pistas de catálogo)
Avatares y clips generados—Créditos HeyGen
Render en la nube—Créditos HeyGen
Studio app✅Cuenta HeyGen gratis
Conector en Claude.ai / ChatGPT—Cuenta HeyGen + plan con conectores

Sin cuenta, la voz corre con Kokoro en local, la música son pistas que tú añadas y los SFX vienen de un set incluido. El plan de tu agente lo paga tu agente, no HeyGen.

⚠️ Límites y trampas

  • FFmpeg no es opcional para renderizar. npx hyperframes doctor lo detecta.
  • Fuentes: si el proyecto no declara la fuente con @font-face, el render cae a una fuente por defecto. npx hyperframes lint lo reporta.
  • Plugin vs. skill suelta: no mezcles ambos. Si instalas el plugin, quita el core-skills@hyperframes viejo y confirma que el agente carga la copia del plugin.
  • Versiones: el manifiesto fija la versión del CLI, no el commit de las skills. Un marketplace con auto-refresh puede cambiar el contenido sin subir el CLI.
  • No corras npx hyperframes skills update dentro de un flujo con plugin: usa el lanzador del plugin.
  • Telemetría: el CLI manda datos anónimos de uso y rendimiento; nunca nombres de proyecto ni contenido. Se apaga con npx hyperframes telemetry disable.
  • Privacidad: el render local no sube el vídeo; el render en nube y el conector sí lo suben a HeyGen.
  • Rendimiento: un ejemplo medido — 300 frames a 1920×1080 en 9,8 s; 25 s con una sola declaración CSS cara. Para revisar, --quality draft.

🥊 HyperFrames vs. Remotion

HyperFramesRemotion
UnidadHTML + CSS + JS con data-*Componentes React
TimelineAnimación pausada y frame exactouseCurrentFrame()
EnfoqueAgentes que ya escriben webDevs que ya escriben React
RelaciónNo usa ni ejecuta RemotionEcosistema aparte

Hay skill de migración (/remotion-to-hyperframes) para traer código o footage existente, verificado frame a frame.

🐉 Mi lectura

Cuándo sí y cuándo no

Sí: cuando el vídeo es composición gráfica —títulos, explainers, promos, kinetic type, captions, decks— y quieres que un agente lo genere y lo deje editable. Es la pieza que le faltaba a tu stack de motion: HTML con seek() no te daba MP4, y esto lo resuelve sin montar un render propio.

No: si necesitas edición de footage real tipo NLE, o si tu equipo ya vive en React y Remotion le funciona. Tampoco si el destino es Windows on Arm con Studio.

Lo que vigilaría: la carpeta del proyecto es la fuente de verdad. Igual que con las skills de Scorch, conviene versionarla y no depender de la copia que el agente tenga en memoria.

🔗 Enlaces

Vista Gráfica

Retroenlaces