HyperFrames : créer des vidéos MP4 avec du HTML et du CSS

Vous savez mettre en page une interface, mais produire une vidéo vous oblige souvent à changer complètement d’outils. HyperFrames propose un autre point de départ : composer avec les technologies du web, puis exporter le résultat en MP4.

Ce framework open source de HeyGen s’adresse aux développeurs et aux créatifs qui veulent garder un projet éditable, plutôt qu’un simple fichier final.

Du HTML à une vidéo calculée image par image

La vidéo est décrite dans une composition HTML. Le CSS règle son apparence, tandis que des attributs définissent les moments d’apparition et les pistes. Les animations doivent pouvoir retrouver leur état à un instant précis, avec des moteurs comme GSAP, CSS, Lottie ou Three.js.

Pour produire le fichier, le moteur se positionne sur chaque image dans Chrome sans interface, puis FFmpeg encode le résultat. L’éditeur annonce un rendu déterministe : les mêmes entrées produisent la même vidéo. Ce n’est donc pas simplement un enregistrement de votre écran pendant la lecture.

Des usages proches du travail des développeurs

La galerie présente des films de lancement, des démonstrations de produit, des animations graphiques et des vidéos construites autour d’une musique. Elle montre aussi des projets liés à une pull request GitHub ou à une maquette Figma. Ces exemples donnent des pistes, pas une garantie de résultat.

Pour votre équipe, cela peut servir à présenter une fonctionnalité, expliquer visuellement un changement ou animer des données. Une annonce technique gagne parfois à montrer trois étapes clairement plutôt qu’à empiler les diapositives. Avant de choisir les effets, définissez surtout ce que le spectateur doit comprendre.

Votre première vidéo, même si vous débutez

Imaginez un petit atelier : vous expliquez la vidéo souhaitée à un assistant IA capable de travailler dans un dossier, il prépare le projet, puis HyperFrames le transforme en fichier vidéo. Vous pouvez commencer sans écrire vous-même le HTML. Il faut toutefois préparer les outils sur votre ordinateur.

1 — Préparer votre atelier

Utilisez un agent de développement, par exemple Claude Code ou Cursor, connecté à votre compte. Un agent peut créer des fichiers et exécuter des commandes dans un dossier. Créez un dossier vide nommé ma-premiere-video, puis ouvrez-le dans cet outil.

Pour le parcours local, le dépôt indique Node.js 22 ou plus récent et FFmpeg. Node.js permet de lancer les outils du projet ; FFmpeg fabrique le fichier vidéo. Si ces noms ne vous disent rien, commencez par coller cette demande dans la conversation de votre agent :

Je débute. Vérifie si Node.js 22 ou plus récent, npm et FFmpeg sont disponibles sur cet ordinateur. Si un outil manque, explique-moi son installation adaptée à mon système, étape par étape. Puis vérifie que tout fonctionne avant de continuer.

2 — Donner un premier brief très simple

Une fois les outils prêts, copiez ce message dans la conversation de l’agent. Remplacez ADRESSE_DU_SITE par le lien complet de votre site. Commencez par dix secondes : c’est plus facile à corriger qu’une longue présentation.

Prépare ce dossier pour HyperFrames. Si le plugin est déjà installé, utilise ses outils ; sinon, installe les compétences principales avec npx hyperframes skills update.

Crée ensuite une vidéo de présentation de 10 secondes pour ADRESSE_DU_SITE.
Format horizontal 16:9, texte en français, gros caractères lisibles, trois scènes : le nom du site, son intérêt principal, puis une invitation à le découvrir.
Pour ce premier essai, pas de voix ni de médias générés payants.
Appuie-toi sur les informations vérifiables du site. S’il manque des informations, demande-les-moi.
Ouvre l’aperçu local et indique le dossier contenant le projet.

3 — Regarder et demander une correction

L’aperçu sert à regarder la vidéo avant l’export. Contrôlez les textes, les images et le rythme. Vous pouvez demander une retouche en français, par exemple : « Garde les trois scènes, agrandis les titres et laisse la dernière scène deux secondes de plus. » Regardez de nouveau le résultat après chaque modification.

4 — Exporter votre fichier MP4

Quand le résultat vous convient, demandez à l’agent de vérifier le projet puis de l’exporter en MP4, en vous donnant le chemin exact du fichier. Si vous préférez lancer les commandes vous-même, ouvrez le terminal dans le dossier du projet : c’est la zone où l’on tape des instructions. Exécutez ces deux lignes l’une après l’autre :

npx hyperframes check
npx hyperframes render --output video.mp4

La première commande contrôle le projet. Si elle signale un problème, faites-le corriger avant de lancer la seconde, qui produit video.mp4. Ouvrez ce fichier pour vérifier la vidéo exportée avant de la partager.

5 — Reprendre le projet plus tard

Conservez le dossier du projet : il contient ce qui permet de modifier la vidéo. Pour retrouver l’aperçu, demandez à l’agent de le rouvrir ou lancez cette commande dans ce même dossier :

npx hyperframes preview

Si une commande échoue, copiez son message d’erreur dans la conversation de l’agent et demandez une explication simple. Une erreur d’installation ne signifie pas que votre idée de vidéo est mauvaise.

Partir d’un modèle, puis adapter le contenu

La galerie propose des modèles complets : typographie animée, présentation produit, graphiques éditoriaux ou composition vierge. Un catalogue fournit aussi des blocs réutilisables, comme un graphique, une animation de code ou une transition. Vous pouvez partir d’un ensemble cohérent plutôt que d’une page blanche.

Plusieurs vidéos de démonstration donnent accès à leur projet source. Regardez d’abord le rythme et la lisibilité, puis examinez comment le projet est construit. Pour une annonce de fonctionnalité, choisissez une structure adaptée à votre message avant de remplacer les contenus et d’ajuster les mouvements.

Distinguer le moteur et les services annexes

HyperFrames est gratuit et open source, sous licence Apache 2.0. Le guide précise que le rendu local ne consomme pas de crédits HeyGen. Cela décrit le moteur et son utilisation locale, pas nécessairement toute la chaîne de production.

Votre agent de programmation peut avoir son propre coût. Il en va de même pour les services optionnels hébergés, les voix, les avatars ou les médias générés. Avant de lancer un projet, distinguez donc le rendu vidéo des ressources et services utilisés pour le fabriquer : gratuit ne signifie pas que chaque intervenant travaille bénévolement.

L’avis du Dindon

HyperFrames me paraît surtout pertinent pour une équipe à l’aise avec le web, qui veut produire des vidéos tout en conservant des sources modifiables. Son intérêt n’est pas seulement l’export MP4 : c’est la possibilité de reprendre le projet et de l’intégrer à une automatisation. Je privilégierais ce fonctionnement pour des annonces produit ou des explications techniques récurrentes. La limite reste concrète : une composition animée demande des règles temporelles adaptées, et la première proposition d’un agent doit être relue. Le framework organise la fabrication ; il ne valide pas votre message.

Sources consultées le 13/10/2026 : GitHub – heygen-com/hyperframes: Write HTML. Render video. Built for agents. · GitHub · Make your first video – HyperFrames · Build on HyperFrames – HyperFrames · Examples – HyperFrames.