HyperFrames - framework open source enfocado en agentes de IA para crear video con HTML

• 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 IA para programación como Claude Code y Codex escriben HTML directamente
  • Con npx skills add heygen-com/hyperframes se puede enseñar 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 para OpenAI Codex y plugin para Cursor
• Cómo se usa
  • 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 puedes conectar libremente el runtime de animación que quieras, como GSAP, Lottie, CSS o Three.js
• Su renderizado determinista (Deterministic) garantiza misma entrada = misma salida, por lo que encaja bien en pipelines de automatización
• Ofrece un catálogo de más de 50 bloques y componentes preconstruidos (transiciones con shader, overlays sociales, gráficos 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> admite un pipeline completo para capturar un sitio web y convertirlo en video
• Frente a Remotion, la diferencia clave está en el artefacto de trabajo (HTML vs React) y la licencia
  • HyperFrames: Apache 2.0 (certificada por OSI) — completamente 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 de más de 3 personas necesitan una licencia corporativa de pago
  • HyperFrames reproduce directamente index.html sin etapa de build; Remotion requiere un bundler
  • Las animaciones basadas en clock de librerías como GSAP, Anime.js y Motion One son seekable y mantienen precisión por frame en HyperFrames, mientras que en Remotion se reproducen con wall-clock al renderizar
  • Remotion ya tiene renderizado distribuido con 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 (renderizado completo), studio (editor en navegador), player (web component), shader-transitions
• Licencia Apache 2.0, basado en TypeScript