C’est quoi, HyperFrames ?
HyperFrames est un outil gratuit et open source créé par HeyGen, sorti en mars 2026. Il fabrique des vidéos animées à partir de code : titres, chiffres, captures de ton produit, logos, sous-titres, voix off et musique.
Tu n’écris jamais ce code toi-même. HyperFrames a été pensé pour les agents d’IA comme Claude Code : tu expliques ce que tu veux dans le chat, Claude écrit la vidéo, te montre l’aperçu, corrige ce que tu lui demandes et exporte le fichier final. Pas de logiciel de montage, pas de compétence technique au départ.
C’est l’outil avec lequel j’anime les vidéos de mes clients (startups, SaaS, PME). Ce guide reprend ce qu’il faut savoir pour démarrer.
À savoir : HyperFrames évolue très vite (version 0.8 au moment où j’écris). Si quelque chose a changé, la documentation officielle (s’ouvre dans un nouvel onglet) fait foi.
Ce qu’il te faut avant de commencer
- Claude Code, avec un abonnement Claude. Tu peux l’utiliser dans l’application Claude, onglet Code : c’est un chat, comme Claude classique, mais qui peut créer des fichiers et lancer des outils sur ton ordinateur.
- Un ordinateur Mac ou Windows récent.
C’est tout. HyperFrames a besoin de quelques outils en arrière-plan (Node.js, FFmpeg, Chrome) : tu n’as pas à savoir ce que c’est, Claude Code vérifie qu’ils sont là et installe ce qui manque. Écris-lui simplement :
À écrire à Claude Code
Vérifie que mon ordinateur a tout ce qu’il faut pour utiliser HyperFrames (Node.js 22 ou plus récent, FFmpeg, Chrome) et installe ce qui manque. Explique-moi chaque étape simplement.
Installer HyperFrames dans Claude Code
HyperFrames s’installe comme une extension (un « plugin ») de Claude Code. Tape ces deux lignes dans le chat, l’une après l’autre, une seule fois :
Dans le chat de Claude Code
/plugin marketplace add heygen-com/hyperframes
/plugin install hyperframes@hyperframesC’est fait. Quand tu commences ton message par /hyperframes, Claude sait qu’il doit faire une vidéo avec HyperFrames, et il charge les bonnes méthodes selon ce que tu demandes : présentation de produit, vidéo explicative, sous-titres, vidéo calée sur une musique, diaporama…
L’outil change souvent et ne se met pas à jour tout seul. De temps en temps, écris à Claude « Mets à jour le plugin HyperFrames ».
Tu utilises un autre agent, comme Codex, Cursor ou Gemini ? HyperFrames marche aussi avec eux : demande-lui d’installer les skills HyperFrames de HeyGen.
Ta première vidéo, étape par étape
Écris ton script d’abord
Avant d’ouvrir Claude Code, écris ce que la vidéo dit, scène par scène, avec une durée pour chacune. Une idée par scène. C’est l’étape que presque tout le monde saute, et c’est elle qui fait la différence entre une démo technique et une vidéo qui donne envie.
Donne ton brief à Claude Code
Commence une nouvelle conversation dans Claude Code et donne ton brief. Par exemple :
À écrire à Claude Code
/hyperframes Fais une vidéo de présentation de 30 secondes, en 16:9, pour mon logiciel de prise de rendez-vous (site : https://example.com). Suis ce script, scène par scène : 1. (0 à 5 s) Le problème : « Tu passes tes soirées à caler des rendez-vous. » 2. (5 à 15 s) La solution : l’agenda se remplit tout seul, montre l’interface. 3. (15 à 25 s) Le résultat : « 4 heures gagnées par semaine. » 4. (25 à 30 s) Le logo et l’adresse du site. Style : fond clair, les couleurs et la police de mon site, une seule couleur d’accent. Chaque animation doit aider à comprendre, pas décorer.
Claude propose une direction, crée le projet, puis ouvre l’aperçu de la vidéo dans ton navigateur. Tu as des captures d’écran de ton produit, ton logo, une musique ? Glisse-les dans la conversation et dis-lui où les utiliser.
Regarde l’aperçu et corrige
L’aperçu se met à jour à chaque modification. Corrige en parlant à Claude, une scène à la fois, en étant précis sur le moment et sur ce que tu veux :
- « La scène 2 est trop chargée : garde seulement le chiffre. »
- « À 8 secondes, le texte sort du cadre. »
- « Ralentis l’entrée du logo, et laisse-le une seconde de plus à l’écran. »
Exporte la vidéo
Quand la vidéo te plaît :
À écrire à Claude Code
Exporte la vidéo en MP4, en haute qualité. Vérifie avant que rien ne déborde du cadre.
Besoin d’une version carrée pour LinkedIn, verticale pour les réseaux, ou à fond transparent pour la poser sur une vidéo que tu as filmée ? Demande-le, Claude s’occupe des réglages.
Regarde toujours la vidéo exportée jusqu’au bout, pas seulement l’aperçu : il arrive qu’un plan apparaisse noir dans l’aperçu alors qu’il est correct dans le fichier final.
Les pièges du début
Le test du Journal du Net (s’ouvre dans un nouvel onglet) résume bien l’expérience des premières heures : l’outil est impressionnant, mais il demande d’être surveillé. Ce que tu vas rencontrer, et comment t’en sortir :
- Les écrans noirs et les textes qui débordent. Une scène vide, des éléments qui se superposent, un texte coupé : c’est le plus courant. Corrige scène par scène plutôt que de tout refaire, en disant à quel moment le problème apparaît.
- Tout demander d’un coup. Travaille par morceaux de 20 à 30 secondes. Et avant qu’il se lance, demande-lui son plan : « Dis-moi d’abord comment tu comptes faire, sans rien créer. »
- Un export qui bloque ou une vidéo qui saute. Copie le message d’erreur dans le chat : ce sont des pièges connus d’HyperFrames, Claude sait les corriger.
- Le coût des corrections. Chaque aller-retour consomme ton abonnement Claude. Le Journal du Net a mesuré environ 0,75 $ pour une vidéo de 30 secondes. Un bon script au départ, c’est moins de corrections ensuite.
Pourquoi ta vidéo fait « IA », et comment l’éviter
HyperFrames règle la partie technique. Il ne décide pas de ce que ta vidéo raconte. Les vidéos qui « font IA » ont presque toujours les mêmes défauts :
- Pas de script. L’agent remplit le temps avec des effets, parce que personne ne lui a dit quoi dire.
- Trop de choses à l’écran. Trois messages par scène, des textes qui passent trop vite pour être lus.
- Des animations sans raison. Tout bouge, rien n’aide à comprendre.
- Le son oublié. Une voix monotone, une musique qui couvre la voix, ou pas de son du tout. Le son compte autant que l’image.
- Un style générique. Les couleurs et les polices par défaut au lieu de celles de ta marque, les mêmes transitions que partout.
La bonne nouvelle : ce sont des réflexes de métier, et ils s’apprennent. Partir du message, construire un déroulé logique, une idée par scène, un rythme qui laisse le temps de lire, une voix et une musique bien posées.
HyperFrames ou Remotion ?
Remotion est l’autre grand outil pour faire des vidéos avec du code, et HyperFrames s’en inspire ouvertement. Les deux se pilotent depuis Claude Code. Ce qui les distingue :
| HyperFrames | Remotion | |
|---|---|---|
| Ce que Claude écrit | Une page web animée (HTML, CSS, animations GSAP) | Des composants React |
| Licence | Gratuit pour tout le monde (open source, Apache 2.0) | Gratuit pour les particuliers et les entreprises de 3 salariés au plus, licence payante au-delà |
| Maturité | Récent (2026), change chaque semaine | Plus ancien : plus de modèles, de tutoriels et de retours d’expérience |
Pour qui débute avec une IA, HyperFrames a deux avantages : les IA écrivent plus facilement une page web que du React (c’est aussi le constat du Journal du Net), et il est gratuit quelle que soit la taille de ton entreprise (voir la licence de Remotion (s’ouvre dans un nouvel onglet)).
Remotion reste un très bon choix si tu codes déjà en React, ou si tu veux un outil plus installé, avec plus d’exemples : mon guide Remotion avec Claude Code explique comment démarrer. Les fondamentaux d’une bonne vidéo, eux, sont les mêmes quel que soit l’outil.
