- Crea videos y los renderiza a MP4 usando solo HTML + CSS + GSAP, de forma similar a Remotion
- Sin React ni un DSL propio: un archivo HTML puro es la composición de video, y
index.html se reproduce tal cual sin etapa de build
- Optimizado para flujos de trabajo donde agentes de codificación con IA como Claude Code y Codex escriben HTML directamente
- Con
npx skills add heygen-com/hyperframes es posible enseñarle al agente los patrones del framework
- En Claude Code se puede invocar directamente con los comandos slash
/hyperframes, /hyperframes-cli, /gsap
- También ofrece por separado plugin de OpenAI Codex y plugin de Cursor
- Formas de uso
- Describe lo que quieres: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
- Convertir contenido existente en video:
- "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes."
- "Summarize the attached PDF into a 45-second pitch video using /hyperframes."
- "Turn this CSV into an animated bar chart race using /hyperframes."
- Formato específico: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
- Iteración: usar al agente como si fuera un editor de video
- "Make the title 2x bigger, swap to dark mode, and add a fade-out at the end."
- "Add a lower third at 0:03 with my name and title."
- Cómo empezar manualmente
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser (live reload)
npx hyperframes render # render to MP4
hyperframes init instala automáticamente la skill, así que después se puede usar en cualquier momento
- Con el patrón Frame Adapter permite conectar libremente el runtime de animación que quieras, como GSAP, Lottie, CSS o Three.js
- Su renderizado determinista (Deterministic) garantiza que la misma entrada produce la misma salida, por lo que encaja bien en pipelines automatizados
- Incluye un catálogo de más de 50 bloques y componentes prefabricados (transiciones con shaders, overlays sociales, gráficas de datos, etc.), instalables con
npx hyperframes add <nombre-del-bloque>
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chart
- Con el comando
hyperframes capture <url> ofrece un pipeline completo para capturar sitios web y convertirlos en video
- Frente a Remotion, las diferencias clave son el artefacto de trabajo (HTML vs React) y la licencia
- HyperFrames: Apache 2.0 (certificada por OSI) — totalmente apta para uso comercial, sin costo por render, sin límite de asientos ni restricciones por tamaño de empresa
- Remotion: licencia personalizada source-available; las empresas con más de 3 personas necesitan una licencia comercial de pago
- HyperFrames reproduce
index.html directamente sin etapa de build; Remotion requiere bundler
- Las animaciones basadas en el reloj de librerías como GSAP, Anime.js y Motion One pueden buscarse por posición y mantener precisión por fotograma en HyperFrames, mientras que en Remotion se reproducen con wall-clock durante el render
- Remotion tiene renderizado distribuido en Lambda listo para producción; HyperFrames por ahora solo soporta renderizado en una sola máquina
- Paquetes incluidos: CLI, core (tipos, parser, linter), engine (captura con Puppeteer + FFmpeg), producer (render completo), studio (editor en navegador), player (web component), shader-transitions
- Basado en TypeScript, con licencia Apache 2.0
1 comentarios
Es una herramienta inspirada en Remotion y casi muy parecida, pero elimina React y crea todo directamente con HTML.
Por ahora, como somos una empresa pequeña, usamos Remotion tal cual.
Remotion es gratis solo para hasta 3 personas, así que para equipos un poco más grandes parece que convendría usar HyperFrames.