HyperFrames - un 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 fichier HTML pur 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
  • Possibilité de faire apprendre à l’agent les patterns du framework avec npx skills add heygen-com/hyperframes
  • 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 vous voulez : "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 éditeur 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, ce qui permet ensuite de l’utiliser à tout moment
• Grâce au pattern Frame Adapter, il est possible de connecter librement le runtime d’animation de son choix, comme GSAP, Lottie, CSS ou Three.js
• Un rendu déterministe (Deterministic) garantissant que la même entrée produit la même sortie, ce qui le rend adapté aux pipelines d’automatisation
• Fournit un catalogue de plus de 50 blocs et composants préfabriqués (transitions shader, overlays sociaux, graphiques de données, etc.), installables via 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 un pipeline complet 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 liée à 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 sont seekable dans HyperFrames et conservent une précision image par image, alors que dans Remotion elles sont jouées sur l’horloge réelle lors du rendu
  • Remotion dispose d’un rendu distribué Lambda prêt pour la production, tandis qu’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
• Licence Apache 2.0, basé sur TypeScript

[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.