HyperFrames - Framework open source dédié aux agents IA pour créer des vidéos en HTML

• Comme Remotion, permet de créer des vidéos uniquement avec HTML + CSS + GSAP et de les rendre en MP4
• Sans React ni DSL propriétaire, un simple fichier HTML constitue directement la composition vidéo, et index.html se lit tel quel sans étape de build
• Optimisé pour les workflows où des agents de codage IA comme Claude Code ou Codex écrivent directement du HTML
  • npx skills add heygen-com/hyperframes permet d’enseigner les patterns du framework à l’agent
  • Dans Claude Code, appel direct possible via les commandes slash /hyperframes, /hyperframes-cli, /gsap
  • Un plugin OpenAI Codex et un plugin Cursor sont également proposés séparément
• Mode d’utilisation
  • Décrire ce que l’on veut : "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • Transformer du contenu existant en vidéo :
    • "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."
  • Format spécifique : "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • Itération — utiliser l’agent comme un monteur vidéo :
    • "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."
• Démarrage manuel

  npx hyperframes init my-video  
  cd my-video  
  npx hyperframes preview      # preview in browser (live reload)  
  npx hyperframes render       # render to MP4  
  

  • hyperframes init installe automatiquement cette compétence, qui peut ensuite être utilisée à tout moment
• Le pattern Frame Adapter permet de connecter librement le runtime d’animation souhaité, comme GSAP, Lottie, CSS ou Three.js
• Le rendu déterministe (Deterministic), qui garantit la même sortie pour la même entrée, convient bien aux pipelines d’automatisation
• Fournit un catalogue de plus de 50 blocs et composants préconçus (transitions shader, overlays sociaux, graphiques de données, etc.), installables avec npx hyperframes add <nom_du_bloc>

  npx hyperframes add flash-through-white   # shader transition  
  npx hyperframes add instagram-follow      # social overlay  
  npx hyperframes add data-chart            # animated chart  
  

• La commande hyperframes capture <url> prend en charge tout le pipeline pour capturer un site web et le convertir en vidéo
• Par rapport à Remotion, les différences clés portent sur le support de travail (HTML vs React) et la licence
  • HyperFrames : Apache 2.0 (certifiée OSI) — usage commercial entièrement autorisé, sans coût par rendu, sans limite de sièges ni restriction selon la taille de l’entreprise
  • Remotion : licence personnalisée source-available — une licence entreprise payante est requise pour les sociétés de plus de 3 personnes
  • HyperFrames lit directement index.html sans étape de build, tandis que Remotion nécessite un bundler
  • Les animations pilotées par l’horloge de bibliothèques comme GSAP, Anime.js ou Motion One restent seekable et conservent une précision image par image dans HyperFrames, alors que dans Remotion elles sont lues sur l’horloge réelle lors du rendu
  • Remotion est prêt pour le rendu distribué sur Lambda en production, tandis que HyperFrames ne prend actuellement en charge que le rendu sur une seule machine
• Composition du package : CLI, core (types, parseur, linter), engine (capture Puppeteer + FFmpeg), producer (rendu complet), studio (éditeur navigateur), player (web component), shader-transitions
• Basé sur TypeScript, sous licence Apache 2.0

[xguru]

Inspiré de Remotion, c’est un outil presque similaire, mais qui supprime React et permet de tout créer directement en HTML.
Pour l’instant, comme nous sommes une petite entreprise, nous utilisons simplement Remotion.
Remotion n’est gratuit que jusqu’à 3 personnes, donc pour une structure un peu plus grande, HyperFrames semble être une bonne option.