Cómo instalar Hyperframes para motion graphics: crea video MP4 con puro HTML

¿Y si te dijéramos que puedes crear motion graphics profesionales sin abrir After Effects, sin timelines interminables y sin exportar a las 3 de la mañana? Aprender a instalar Hyperframes es justo eso: un framework open source que convierte HTML, CSS y animaciones en video MP4 real, fotograma a fotograma. Escribes código, obtienes video.

Hyperframes (creado por el equipo de HeyGen) está pensado para agentes de IA como Claude Code, pero también funciona como CLI local. En esta guía lo instalas en minutos y renderizas tu primer motion graphic. Prepárate: esto cambia por completo cómo produces video para marketing.

¿Qué es Hyperframes y por qué revoluciona los motion graphics?

Hyperframes es un motor de renderizado que toma una página HTML y la captura con Chrome headless para producir un video determinista. La palabra clave es determinista: el mismo código genera siempre exactamente el mismo video, sin sorpresas.

Por debajo combina tecnologías que quizá ya conoces. Esto es lo que trae de fábrica:

• GSAP como motor de animación principal, más soporte para Lottie, Three.js y Anime.js.
• FFmpeg para codificar el video final y mezclar el audio.
• Puppeteer y Chrome headless para capturar cada fotograma con precisión.
• Más de 50 bloques listos para usar: gráficas animadas, contadores, revelaciones de UI y mucho más.

Requisitos antes de instalar Hyperframes

Antes de ejecutar un solo comando, asegúrate de tener el entorno listo. La instalación falla si falta alguna de estas piezas:

• Node.js 22 o superior (el motor de JavaScript que ejecuta todo).
• FFmpeg instalado y accesible desde la terminal.
• Bun, el gestor de paquetes que usa el monorepo (no npm ni pnpm para el clon de desarrollo).
• Git y Git LFS si vas a clonar el repositorio completo con sus archivos de prueba.

Cómo instalar Hyperframes paso a paso

Hay dos caminos según lo que busques. El primero es ideal si trabajas con un agente de IA; el segundo, si quieres el código fuente completo para desarrollar.

Opción 1: como skill de agente (la vía rápida)

Si usas Claude Code, esta es la forma más directa. Instala las skills y luego pide el video en lenguaje natural:

npx skills add heygen-com/hyperframes

Después solo tienes que escribir algo como “/hyperframes crea un motion graphic de 6 segundos con el número 2,300 en count-up” y el agente arma la composición, la valida y la renderiza por ti.

Opción 2: clon completo del repositorio (para desarrolladores)

Si prefieres tener todo el framework para modificarlo, clona el repositorio y compílalo con Bun:

git lfs install
git clone https://github.com/heygen-com/hyperframes.git
cd hyperframes
bun install
bun run build

El monorepo instala alrededor de 1,500 paquetes y compila todos los módulos: CLI, motor de captura, reproductor y studio. Cuando termina, el CLI queda listo para crear y renderizar composiciones.

Tu primer motion graphic: de HTML a MP4 en 3 comandos

Con Hyperframes instalado, el flujo de trabajo es sorprendentemente corto. Estos tres comandos crean, previsualizan y renderizan un proyecto:

npx hyperframes init mi-video
npx hyperframes preview
npx hyperframes render

¿Y cómo se ve una composición por dentro? Es HTML normal con atributos de tiempo. El contenedor raíz define la duración y cada elemento animable lleva la clase clip:

<div id="root" data-composition-id="main" data-duration="5">
  <h1 id="titulo" class="clip">Hola Hyperframes</h1>
</div>

La animación se define con un timeline de GSAP en pausa y registrado para que el motor lo avance fotograma a fotograma. Esa es la clave del renderizado determinista: nada de fechas dinámicas ni valores aleatorios sin semilla.

Errores comunes al instalar Hyperframes (y cómo evitarlos)

• Versión de Node antigua: si usas Node 20 o menos, actualiza a la 22 o superior.
• FFmpeg no encontrado: verifícalo con el comando hyperframes doctor, que revisa todas las dependencias.
• Usar npm en el monorepo: el clon de desarrollo espera Bun; mezclar gestores rompe el lockfile.
• Saltarte la validación: corre hyperframes lint y hyperframes check antes de renderizar.

¿Vale la pena frente a los editores tradicionales?

Para motion graphics repetitivos y basados en datos —contadores, gráficas, lower-thirds, promos— Hyperframes es un cambio de juego porque versiona el video como si fuera código. Se apoya además en el mismo ecosistema que otras skills de animación y diseño para Claude Code, así que encaja de forma natural en un flujo asistido por IA.

Eso sí, no reemplaza a un editor para todo. Si tu proyecto necesita edición manual sobre metraje real, quizá te convenga editar video con IA en Adobe Premiere Pro. Y si además quieres que tu asistente analice clips existentes, puedes hacer que Claude vea cualquier video antes de convertirlo en motion graphic.