Monter une vidéo en écrivant une page web : HyperFrames, le montage à l'heure des agents IA

Monter une vidéo, c’est d’habitude ouvrir un logiciel, glisser des rushes sur une timeline, caler des titres à la main et exporter. HyperFrames propose autre chose : la vidéo est une page web. On décrit ce qu’on veut, un agent IA écrit la page, et l’outil la transforme en fichier MP4, image par image.

Ce n’est pas un gadget de plus. C’est un changement de méthode, qui intéresse directement tous ceux qui produisent des vidéos courtes et régulières : tutoriels, présentations, bandes-annonces, vidéos pour les réseaux sociaux.

HyperFrames, c’est quoi ?

HyperFrames est un outil open source publié par HeyGen, une société spécialisée dans la vidéo générée par IA. Il est sorti au printemps 2026, sous licence Apache 2.0 : utilisation libre, y compris commerciale, sans compte ni clé d’API, sans obligation de passer par un service en ligne.

Son principe tient en une phrase : le HTML est la source de la vidéo. Tout ce qu’un navigateur sait afficher (texte, images, vidéos, graphiques, animations) peut devenir une séquence filmée.

Point	En bref
Éditeur	HeyGen, projet communautaire sur GitHub
Licence	Apache 2.0 (libre, usage commercial autorisé)
Prérequis	Node.js 22 ou plus récent, FFmpeg
Sortie	MP4, ou WebM avec fond transparent
Maturité	Version 0.x : jeune, mises à jour très fréquentes

Comment une page web devient une vidéo

Une vidéo HyperFrames est un dossier de projet dont le cœur est un fichier index.html, appelé composition. Chaque élément à l’écran porte trois indications :

• quand il commence (data-start, en secondes) ;
• combien de temps il dure (data-duration) ;
• sur quelle piste il se trouve (data-track-index), comme les pistes d’un logiciel de montage.

Les mouvements (un titre qui glisse, un chiffre qui grandit, un fondu) sont écrits avec une bibliothèque d’animation web, le plus souvent GSAP. Lottie, Three.js ou les animations CSS sont aussi acceptés.

<h1 id="titre" data-start="0" data-duration="4" data-track-index="1">
  Bienvenue à l'école de musique
</h1>
<audio id="voix" data-start="0" data-track-index="2" src="voix-off.wav"></audio>

Le point décisif est le rendu. HyperFrames ne filme pas la page pendant qu’elle joue : il ouvre un navigateur Chrome invisible, se place à l’image 1, la photographie, passe à l’image 2, et ainsi de suite. FFmpeg, l’outil de référence pour la vidéo, assemble ensuite les images et le son.

Conséquence : le résultat est déterministe. Un ordinateur lent met plus de temps à produire la vidéo, mais il ne saute aucune image. Deux rendus du même projet donnent la même vidéo.

Le studio de HyperFrames ouvert sur un vrai projet : à gauche, le fichier index.html de la composition ; au centre, l’aperçu de la vidéo à 00:24.

Le travail en cinq commandes

Tout se pilote en ligne de commande, avec npx hyperframes :

Étape	Commande	Ce qu’elle fait
Créer	init mon-projet	Prépare le dossier, copie les médias, installe les instructions pour l’agent IA
Vérifier	lint	Repère les erreurs de structure : pistes qui se chevauchent, animation non déclarée
Contrôler	inspect	Parcourt la vidéo et signale le texte qui déborde d’un cadre ou de l’écran
Prévisualiser	preview	Ouvre un studio dans le navigateur, avec rechargement à chaque modification
Produire	render	Fabrique le MP4 final, en qualité brouillon ou haute

La commande inspect mérite qu’on s’y arrête. Elle fait ce qu’un monteur fait à l’œil : vérifier qu’aucun titre ne sort du cadre, qu’aucune étiquette n’est coupée. Ici, c’est automatique, horodaté, et l’agent IA peut lire le rapport pour corriger lui-même.

Dans le studio, on retrouve les repères d’un logiciel de montage : l’aperçu, les réglages de l’élément sélectionné (ici la photo P07) et, en bas, la frise avec une piste par ligne.

Voix off, sous-titres et détourage intégrés

HyperFrames embarque trois outils qui évitent de jongler entre plusieurs logiciels, et ils tournent tous sur votre ordinateur :

• Voix off (tts) : synthèse vocale avec le modèle Kokoro, sans abonnement. Le choix de voix est large en anglais, très limité en français. Pour une voix française naturelle, un service comme ElevenLabs reste préférable, et son fichier audio s’intègre sans difficulté.
• Sous-titres (transcribe) : transcription avec Whisper, mot par mot et horodatée. Les sous-titres s’affichent exactement quand les mots sont prononcés, y compris en style « karaoké ».
• Détourage (remove-background) : retire le fond d’une vidéo ou d’une photo pour faire flotter une personne au-dessus d’un décor.

S’y ajoute un catalogue de blocs prêts à l’emploi : transitions, bandeaux de titre, graphiques animés, cartes, habillages pour les réseaux sociaux.

Pourquoi c’est taillé pour les agents IA

Un logiciel de montage se pilote à la souris. Une page HTML s’écrit. Or écrire du HTML, c’est précisément ce que les assistants de programmation font le mieux.

HyperFrames l’assume : il fournit des instructions prêtes à installer pour Claude Code, Codex, Cursor ou Gemini CLI. L’agent apprend les règles de la composition (pistes, durées, animations, transitions obligatoires entre les scènes), puis enchaîne seul écriture, vérification, correction et rendu.

La répartition du travail change :

L’agent IA fait	Vous faites
Écrire la composition et les animations	Dire ce que la vidéo doit raconter, et à qui
Caler le texte sur la voix off	Fournir la charte : couleurs, polices, logo
Vérifier les débordements et les contrastes	Regarder l’aperçu et demander des retouches
Décliner en 16:9, 9:16 ou carré	Valider la version finale

Et comme le projet reste un dossier de fichiers texte, une retouche est simple : « rallonge le titre d’une seconde », « passe le bandeau en bleu ». L’agent modifie deux lignes, on relance le rendu.

Un exemple réel : trois minutes de glacier

Pour illustrer cet article, nous avons repris un montage fait avec HyperFrames à partir des photos et vidéos d’une randonnée sur un glacier. Aucune timeline n’a été manipulée à la souris. Les règles ont été données en une phrase à l’agent IA :

Chaque photo reste 4 secondes, chaque vidéo 10 secondes au plus en commençant 2 secondes après le début, chaque changement est un fondu d’une seconde, photos et vidéos alternent, et le film se termine avec la musique.

L’agent a écrit un petit script qui prépare les photos et génère la composition. Le résultat :

Élément	Nombre
Durée	3 min 27
Photos, chacune avec un léger mouvement de caméra	36
Extraits vidéo	15
Piste musicale, avec fondu au noir final	1

Les photos prises en hauteur sont posées sur un fond flouté de la même image, pour ne pas laisser de bandes noires. Changer une règle, par exemple passer à 5 secondes par photo, revient à modifier une ligne du script et à relancer le rendu.

Une image du MP4 final, prise en plein fondu enchaîné : les deux vues du glacier se superposent pendant une seconde.

HyperFrames, Remotion ou un logiciel de montage ?

HyperFrames n’est pas le premier à faire de la vidéo avec du code. Remotion le fait depuis plusieurs années, avec des composants React.

	HyperFrames	Remotion	Logiciel de montage
Écriture	HTML, CSS, JavaScript	Composants React	Souris, timeline
Étape de compilation	Aucune	Oui (bundler)	Sans objet
Licence	Apache 2.0, libre	Gratuite jusqu’à 3 personnes, payante au-delà pour les entreprises	Variable
Pilotage par une IA	Conçu pour	Possible	Difficile
Rushes longs, étalonnage fin	Peu adapté	Peu adapté	Fait pour

Les deux outils de code s’appuient sur le même moteur (Chrome et FFmpeg). La différence tient à la simplicité : un fichier HTML se lit et se modifie sans outillage React. Pour une petite structure, la licence compte aussi.

Ce que ça fait bien, et ce que ça ne remplace pas

Là où HyperFrames excelle :

• les séries à charte fixe : les modules d’une formation, un rendez-vous hebdomadaire, une chronique ;
• les vidéos explicatives : schémas animés, chiffres, étapes, captures d’écran commentées ;
• les vidéos tirées de données : un bilan de saison, des résultats, une carte ;
• les déclinaisons : la même vidéo pour YouTube, pour Instagram en vertical et pour l’écran d’accueil d’un site ;
• les habillages : titres, sous-titres et bandeaux posés sur une vidéo existante.

Là où il ne remplace pas un monteur :

• le montage de longs rushes filmés, où l’on choisit les meilleures prises à l’œil ;
• l’étalonnage fin et le travail du son en studio ;
• le documentaire ou le clip, où le rythme naît du visionnage plus que d’une description.

Les points de vigilance

• Un outil jeune. La version 0.x évolue presque chaque jour. C’est un signe de vitalité, mais un projet doit figer sa version pour ne pas être surpris.
• Un rendu gourmand. Chaque rendu lance un ou plusieurs navigateurs Chrome. Une vidéo de quelques minutes en haute qualité occupe un ordinateur récent pendant un bon moment.
• Des polices à fournir. Une police de marque qui n’est pas intégrée doit être ajoutée au projet, sinon l’outil la remplace.
• Un regard humain reste indispensable. Les contrôles automatiques attrapent les débordements et les contrastes. Ils ne disent pas si la vidéo est claire, juste et agréable à regarder.

Ce que nous en retenons

Pour les vidéos de notre formation Claude Code, les scripts sont déjà écrits séquence par séquence, avec la voix off d’un côté et ce qui s’affiche à l’écran de l’autre. C’est exactement la matière qu’attend HyperFrames. Une vidéo de formation devient alors un fichier qu’on corrige comme un texte, au lieu d’un projet de montage qu’il faut rouvrir pour chaque faute de frappe.

Pour une association ou une petite entreprise, l’intérêt est du même ordre : une bande-annonce de spectacle, une vidéo de présentation ou le bilan d’une saison, produits à partir des photos et des textes existants, déclinés en plusieurs formats, et retouchés en une phrase. Le montage n’est pas mort, mais une bonne partie des vidéos du quotidien peut désormais s’écrire.

Sources : dépôt GitHub de HyperFrames, documentation officielle, paquet npm.