HyperFrames : le framework Open Source qui transforme le

Code de composition HTML HyperFrames côte à côte avec sortie MP4 rendue, montrant le flux de travail HTML vers vidéo

##Présentation

Si vous avez déjà essayé d'automatiser la production vidéo, vous vous êtes heurté au même mur : chaque outil (Premiere, After Effects, même les compositeurs basés sur le Web) est conçu pour une personne assise à un bureau avec une souris, et non pour un script qui s'exécute sans surveillance dans un pipeline CI.

Et si la génération de vidéos fonctionnait de la même manière que la création d'un site Web ?

Aujourd'hui, nous examinons HyperFrames — le framework de rendu open source de HeyGen qui traite HTML/CSS comme un format de création vidéo de première classe. Vous écrivez un balisage standard, ajoutez quelques attributs de données pour le timing et le restituez dans un MP4 précis à l'image près. Pas de React DSL. Pas de graphique de scène propriétaire. Pas d'éditeur vidéo.

Il s'agit de l'outil qui permet aux agents d'IA comme Claude Code d'écrire et d'itérer sur des compositions vidéo de la même manière qu'ils écrivent du code. Et il s'agit d'une licence Apache 2.0, entièrement open source, sur github.com/heygen-com/hyperframes.

Le problème de la vidéo programmatique aujourd'hui

!HyperFrames rendering pipeline: HTML template -> frame extraction -> video assembly

La vidéo résiste depuis des décennies au traitement du « code en tant qu’infrastructure ». Chaque tentative nécessite soit :

Un éditeur GUI qui ne peut pas être scripté et nécessite une exportation manuelle
Un wrapper React (qui vous regarde, Remotion) qui ajoute une étape de construction et un DSL opiniâtre
Enregistrement d'écran d'une fenêtre de navigateur : fragile, de mauvaise qualité, chutes d'images
Services de rendu cloud qui coûtent par minute et vous enferment dans un fournisseur

Le coût réel ne se limite pas à l'outillage. C'est que les workflows vidéo ne peuvent pas participer à Git. Vous ne pouvez pas comparer un projet Premiere. Vous ne pouvez pas consulter une composition vidéo dans une pull request. Vous ne pouvez pas reproduire la même sortie à partir des mêmes entrées à moins que votre artiste ne le fasse exactement de la même manière à chaque fois. Et les agents d’IA – qui sont devenus remarquablement doués pour écrire du code – sont complètement exclus du média.

La vidéo automatisée à grande échelle nécessite trois éléments qu'aucun outil existant ne propose pleinement :

Sortie déterministe — même entrée = vidéo identique, toujours
Source traçable par Git — différences de code, restaurations, branchement
Création native d'agent — Les LLM peuvent écrire et modifier des compositions sans formation spécialisée

HyperFrames est conçu pour offrir les trois.

La solution : les HyperFrames

HyperFrames est un framework de rendu vidéo open source de HeyGen qui vous permet de définir des compositions vidéo sous forme de fichiers HTML et de les restituer au format MP4 via Chrome + FFmpeg sans tête.

Sa philosophie de base est d'une simplicité élégante : "Écrire du HTML. Rendre la vidéo. Conçu pour les agents."

Chaque élément de votre HTML devient un « clip » chronométré sur la timeline vidéo, contrôlé via les attributs « data- ». Les animations vivent en CSS/JS standard (GSAP, Lottie, Three.js). L'aperçu est un navigateur de rechargement en direct. Le rendu est une sortie codée FFmpeg et précise à l’image. Aucun format propriétaire ne s'interpose entre vous et le fichier final.

Avec 19,9 000 étoiles et 1,9 000 forks avec 145 versions en mai 2026, il s'agit déjà du framework vidéo open source le plus dynamique disponible dans l'espace développeur + agent IA.

Principales fonctionnalités

Composition HTML native

Les compositions HyperFrames sont de simples fichiers HTML. Pas de réaction. Pas de TSX. Pas de bundle.

<div id="stage"
     data-composition-id="ma-vidéo"
     données-start="0"
     largeur des données = "1920"
     hauteur des données="1080">

  <vidéo
    identifiant="clip-1"
    données-start="0"
    durée des données = "5"
    data-track-index="0"
    src="intro.mp4"
    en sourdine
    jouer en ligne
  ></vidéo>

  <img
    id="superposition"
    classe = "clip"
    données-start="2"
    durée des données = "3"
    data-track-index="1"
    src="logo.png"
  /><audio
    id="bg-musique"
    données-start="0"
    durée des données = "9"
    data-track-index="2"
    volume de données = "0,5"
    src="musique.wav"
  ></audio>
</div>

La Règle de Trois régit les compositions valides :

L'élément racine nécessite data-composition-id, data-width, data-height
Les éléments chronométrés nécessitent class="clip", data-start, data-duration, data-track-index
Les animations doivent utiliser { paused : true } sur les timelines GSAP et s'inscrire sur window.__timelines

C’est une cérémonie proche de zéro. Tout développeur Web capable d'écrire des éléments « div » peut écrire une composition vidéo.

Conception axée sur l'IA

HyperFrames n'est pas seulement compatible avec l'IA : il est conçu pour les agents de codage IA.

La CLI n'est pas interactive par défaut, ce qui signifie qu'elle est scriptable de par sa conception. Les messages d'erreur sont lisibles par machine. La sortie est du texte brut. Aucune invite TTY ne bloque un agent sans tête.

Plus important encore, le framework est livré avec un package de compétences qui enseigne aux agents IA les modèles corrects :

les compétences npx ajoutent heygen-com/hyperframes

Une fois installées, les commandes slash suivantes deviennent disponibles dans Claude Code :

/hyperframes — créer et éditer des compositions
/hyperframes-cli — init, lint, aperçu, rendu
/hyperframes-media — TTS, transcription, suppression de l'arrière-plan
/gsap, /lottie, /trois, /animejs, /css-animations, /waapi — compétences d'animation spécifiques à l'adaptateur

Une invite de démarrage à froid telle que "créer une introduction de produit de 10 secondes avec un titre en fondu et une musique de fond" produit une composition de travail. Les invites de démarrage à chaud qui prennent les fichiers HTML/PDF/CSV existants et les transforment en vidéos fonctionnent tout aussi bien. L'itération n'est qu'un langage naturel : "agrandissez le titre 2x, ajoutez un fondu à la fin."

Il s'agit d'une expérience qualitativement différente de celle d'essayer de piloter Premiere via une API ou de coder manuellement JSX dans Remotion.

50+ blocs prêts à l'emploi

HyperFrames fournit un registre de blocs extensible. Installez les composants communs avec une seule commande CLI :

Les hyperframes npx ajoutent une transition de shader flash-through-white #
Les hyperframes npx ajoutent une superposition sociale Instagram-follow #
les hyperframes npx ajoutent un graphique de données # graphique animé

Les modèles pour les styles vidéo incluent « swiss-grid », « nyt-graph », « play-mode » et « vignelli » – couvrant la narration propre et éditoriale des données d'entreprise, les médias sociaux énergiques et les formats de portrait 9:16.

Le modèle d'adaptateur de cadre

HyperFrames introduit une abstraction "Frame Adapter" qui sépare proprement la logique de synchronisation du runtime d'animation. Apportez votre propre bibliothèque d'animations de recherche (GSAP, Lottie, images clés CSS, Three.js ou API Web Animations) et HyperFrames gère la recherche et la composition d'images.

Cela signifie que vous n'avez pas besoin de réécrire vos connaissances existantes en animation. Si votre équipe utilise déjà les chronologies GSAP pour les animations Web, ces mêmes chronologies fonctionnent dans les compositions vidéo HyperFrames.

Moteur de rendu déterministe

Le pipeline de rendu est précis à l'image près par construction :

Source HTML → Headless Chrome charge la composition → Chrome cherche à cadrer = sol (temps × FPS) → capture d'écran → encodage FFmpeg → MP4

L'API beginFrame de Chrome donne une précision sous-image. Pas de lecture d'horloge murale. Aucune condition de course entre la tête de lecture et la capture. Même HTML, mêmes entrées, même fichier vidéo à chaque fois.

Ce déterminisme est ce qui rend viables les flux de travail pilotés par les agents IA. Un LLM peut modifier en toute sécurité une composition de manière itérative, effectuer un nouveau rendu et effectuer des différences visuelles - ce qui est impossible avec des outils dont le résultat est charéglages en fonction de la charge de la machine, de la dérive de l'horloge ou de l'heure de la journée.

Entièrement open source (Apache 2.0)

HeyGen livre HyperFrames sous Apache 2.0 – une licence permissive et entièrement approuvée par OSI. Aucun niveau payant au-dessus d'un seuil de petite équipe (comme l'utilise Remotion). Aucune licence disponible à la source. Droits complets pour créer, modifier, expédier commercialement ou construire un produit par-dessus.

Pour commencer

Prérequis

node -v # a besoin de >= 22 (vérifier avec nvm)
ffmpeg -version # nécessaire pour l'encodage

Configuration rapide

# Option 1 : initialisation interactive du projet
npx hyperframes init ma-vidéo
cd ma vidéo
aperçu des hyperframes npx # ouvre le navigateur avec rechargement en direct
rendu des hyperframes npx # sorties MP4

## Option 2 : Agent IA (recommandé)
les compétences npx ajoutent heygen-com/hyperframes
## Ensuite, utilisez /hyperframes dans Claude Code, Cursor, etc.

Première composition

Créez index.html à la racine de votre projet :

<identifiant div="racine"
     data-composition-id="bonjour"
     largeur des données = "1920"
     hauteur des données="1080">

  <h1 id="titre" classe="clip"
      données-start="0"
      durée des données = "5"
      data-track-index="0"
      style="font-size: 96px; couleur: blanc; font-family: sans-serif;">
    HyperFrames
  </h1>
</div>

aperçu des hyperframes npx # voir le résultat en direct
rendu des hyperframes npx # enregistré en tant que sortie.mp4

C'est tout. Pas de bundle. Pas d'installation npm du noyau du framework. Un seul fichier HTML constitue une composition vidéo complète.

Utilisation avancée

Animations de la chronologie GSAP

Les animations GSAP fonctionnent dans les HyperFrames avec une règle essentielle : mettez-les en pause pour que les HyperFrames contrôlent la lecture :

// timeline.js — chargé via <script> dans votre composition
const tl = gsap.timeline({ pause : true });
tl.to('#title', { x : 200, opacité : 1, durée : 2, facilité : 'power2.out' })
  .to('#subtitle', { y : 0, opacité : 1, durée : 1 }, '-=0.5');

// Enregistrez-vous pour que les HyperFrames puissent le rechercher
window.__timelines = {main: tl};

HyperFrames recherche window.__timelines.main pour préciser les positions des images pendant le rendu. Vous pouvez parcourir la chronologie dans l'aperçu du navigateur à tout moment et voir un aperçu exact à l'image près.

Compositions multipistes

Les indices de piste contrôlent la superposition dans le compositeur. Un « data-track-index » plus élevé s'affiche en haut :

<!-- Piste 0 : vidéo de base -->
<vidéo data-track-index="0" ... />

<!-- Piste 1 : graphiques superposés -->
<svg data-track-index="1" ... />

<!-- Piste 2 : sous-titres (haut de la pile) -->
<div class="clip" data-track-index="2" ... />

Jusqu'à toutes les couches de composition du navigateur disponibles par image ; pas de limite stricte par projet.

Pipeline site-vidéo

HyperFrames inclut une compétence « site Web vers hyperframes » qui capture une URL en direct et la convertit en une composition vidéo. Cela permet des flux de travail entièrement automatisés tels que :

"Rendez la page d'accueil sur aratech.ae sous la forme d'une vidéo screencast défilante de 30 secondes"
"Prenez le document Notion et transformez chaque section en diapositive chronométrée"
"Générer une démo de produit à partir de l'URL du live staging"

Il s'agit de la boucle de génération vidéo compatible CI que la plupart des équipes marketing effectuent encore à la main.

Lottie et Three.js

// Joueur Lottie enregistré par le runtime HyperFrames
window.__hfLottie.play('animation.json');

// Scène Three.js — HyperFrames injecte le temps d'image actuel
fenêtre.__hfThreeTime = 0; // secondes, définit chaque image par le moteur

Les compétences d'adaptateur (/lottie, /trois) initialisent automatiquement le timing global et exposent correctement la trame, vous n'avez donc pas besoin de configurer vous-même la plomberie.

Comparaison : HyperImages vs rémotion

HyperFrames est directement inspiré de Remotion – le framework vidéo programmatique basé sur React utilisé chez HeyGen en production. Les deux conduisent Chrome sans tête. Les deux produisent une sortie déterministe précise à l’image près. Les deux compétences d'agent maritime. La division architecturale repose sur une décision fondamentale : qu'écrit l'auteur principal ?

	HyperFrames	Rémotion
Format de création principal	HTML + CSS + JS	Réagissez à la Bourse de Toronto
Étape de construction	Aucun — `index.html` est lu tel quel	Bundleur requis
Animations de bibliothèque (GSAP, Lottie)	Recherchable, précis à l'image via des adaptateurs	Joue à l'horloge murale pendant le rendu
HTML/CSS existant	Coller et animer	Doit être réécrit en JSX
Rendu distribué	Une seule machine aujourd'hui	Lambda, prêt pour la production
Licence	Apache 2.0 (entièrement open source)	Source disponible, payé au-dessus d'une petite équipe

Pour les équipes qui écrivent déjà du HTML/CSS ou qui ont besoin d'intégrer des ressources Web existantes dans une vidéo : HyperFrames est le choix évident. Pour les équipes déjà profondément investies dans une bibliothèque de composants React avec CI/CD : Remotion présente certains avantages sur le plan distribué.

L’écart en matière de licences mérite d’être souligné. Le modèle « source-disponible » de Remotion signifie que la taille de votre entreprise, vos revenus ou la topologie de déploiement peuvent déclencher une licence payante. HyperFrames n'a pas de telle restriction sous Apache 2.0.

Pourquoi c'est important maintenant

Deux changements convergents rendent les HyperFrames pertinents cette année plutôt que de futurs pipelines :

1. La vidéo de l'agent IA est ici. Claude Code, Cursor et Codex peuvent coder. Désormais, avec HyperFrames, ils peuvent coder des vidéos. Langage naturel → composition HTML → rendu MP4 est un flux de travail de bout en bout qui s'exécute aujourd'hui. Vous n’avez pas besoin d’attendre qu’un modèle vidéo IA soit suffisamment performant ; vous avez besoin de HTML et d'un moteur de rendu pour être suffisamment performants - et ils le sont.

2. La vidéo programmatique est un fossé concurrentiel. Les équipes qui génèrent des vidéos à grande échelle à partir de données structurées (CSV → courses de graphiques à barres, PDF → vidéos de pitch, site Web → bobines de démonstration) ont un avantage inhumain en termes de vitesse de production de contenu. Les outils qui mobilisent en premier le plus grand nombre de développeurs et d'agents définiront l'infrastructure de la prochaine vague de contenu automatisé.

HyperFrames est précoce mais évolue rapidement : 145 versions, un écosystème de compétences dédié et une intégration avec tous les principaux agents de codage d'IA. C'est le bon moment pour commencer à construire avec.

Conclusion et prochaines étapes

HyperFrames n'est pas simplement un autre outil vidéo. Il s'agit du premier framework de rendu qui traite la composition vidéo comme un artefact de premier ordre dans le flux de travail d'un développeur : versionné dans Git, examiné dans les PR, itéré par des agents et rendu de manière déterministe à chaque validation.

Si vous avez déjà eu besoin de :

Générez 100 vidéos d'introduction personnalisées à partir des données CRM
Transformez un ensemble de pages de destination en une démo
Automatisez la création de clips sociaux à partir des transcriptions de podcast
Intégrer la sortie vidéo générée par l'IA dans un pipeline CI/CD

…HyperFrames est l’outil qui boucle la boucle.

Prêt à commencer ?

HyperFrames : le framework Open Source qui transforme le HTML en vidéo de production

Table of Contents