Hyperframes et /brag : créer des vidéos avec Claude Code, testé sur mon app

TL;DR :

• /brag est un skill gratuit pour Claude Code : une commande, et il transforme ton projet en vidéo de 15 à 25 secondes, avec musique, bruitages et texte de partage.
• Hyperframes, l'outil open source de HeyGen, fabrique la vidéo : Claude écrit une page web animée, Hyperframes la rend en MP4 sur ton ordinateur, sans crédit à payer.
• Mon test sur Sam Tennis : 8 minutes 30 pour la première vidéo, puis 14 vidéos de fonctionnalités, en horizontal et en vertical, dans le même après-midi.
• Le coût : les deux outils sont gratuits. Tu paies seulement l'usage de Claude.
• Les limites : des vidéos courtes, un seul format par lancement, une seule voix française, et des captures d'écran à fournir pour une app mobile.

---

Salut 👋

Pour présenter les fonctionnalités de Sam Tennis, mon app de coach de tennis IA, il me fallait des vidéos courtes : une par fonctionnalité, en horizontal et en vertical, pensées pour des pubs Meta. Je les ai faites avec /brag, un skill pour Claude Code, et Hyperframes, l'outil open source de HeyGen qui transforme du HTML en vidéo. En 1 h 50, j'avais 15 vidéos, sans ouvrir de logiciel de montage.

Ce guide t'explique comment marchent les deux outils, comment les installer, ce qu'ils coûtent et où ils coincent. Ce que j'ai vécu est écrit à la première personne. Le reste vient des dépôts GitHub et des documentations, lus le 23 septembre 2026.

Chapitre 1, 1 min

Hyperframes, c'est quoi ?

Hyperframes est un outil open source de HeyGen, la société connue pour ses avatars vidéo. Son principe tient dans la devise de son dépôt GitHub : « Write HTML. Render video. Built for agents. » Ton agent (Claude, Codex ou un autre) écrit une page web avec du HTML, du CSS et des animations, et Hyperframes la transforme en vidéo MP4.

Pour ça, il ouvre la page dans un Chrome sans fenêtre, la place à l'instant exact de chaque image, fait une capture, puis FFmpeg assemble les images en vidéo. La même page donne toujours la même vidéo, image pour image.

Quelques repères, au 23 septembre 2026 :

• Gratuit : licence Apache 2.0, et le rendu sur ton ordinateur ne consomme aucun crédit HeyGen.
• Jeune et très suivi : dépôt créé en mars 2026, lancé publiquement en avril, déjà 52 556 étoiles sur GitHub.
• Mis à jour sans arrêt : plusieurs versions par jour, la 0.8.64 est sortie le 23 septembre.
• Pensé pour les agents : Hyperframes fournit une vingtaine de skills, dont des modèles de vidéo de lancement ou de vidéo explicative, et la commande npx hyperframes pour prévisualiser, vérifier et rendre une vidéo.

Pour les curieuxPourquoi du HTML et pas React ?

Remotion, l'outil de référence pour faire des vidéos avec du code, s'écrit en React. L'équipe de HeyGen a fait un autre choix, qu'elle explique sur son blog de recherche : les modèles d'IA ont vu beaucoup plus de pages HTML que de code vidéo en React pendant leur entraînement, et ils sont plus créatifs dans un langage qu'ils connaissent bien.

Chapitre 2, 1 min

/brag, ta vidéo en une commande

/brag est un skill open source (licence MIT), publié en juin 2026, avec 6 977 étoiles sur GitHub au 23 septembre. Si tu découvres les skills, commence par mon guide des Skills Claude. Le partage des rôles est simple : /brag écrit l'histoire de la vidéo, Hyperframes la construit, cale le timing et la rend.

Le skill avance en 4 étapes, et il ne passe à la suivante que si la précédente est validée :

1. Il lit ton projet : les pages, le CSS (couleurs, polices), le README, le parcours de l'utilisateur, les images. Il en tire les réponses à 9 questions : ce que fait l'app, sa phrase la plus forte, l'écran à montrer, le ton, l'ambiance sonore...
2. Il écrit le plan dans brag-plan.md : l'angle, l'accroche des 2 premières secondes et un storyboard scène par scène, pour 15 à 25 secondes au total.
3. Il fait construire la vidéo par Hyperframes, puis lance npx hyperframes check. Ce contrôle doit passer sans erreur : contraste trop faible, textes qui se chevauchent, animations qui se contredisent.
4. Il livre brag.mp4, une vignette brag.jpg collée en première image (c'est elle qu'on voit quand tu partages la vidéo) et un texte de partage dans share-copy.txt.

Il impose aussi ses règles : une accroche dans les 2 premières secondes, au moins un vrai écran ou un vrai texte de ton produit, pas de phrases marketing génériques, et un temps de lecture minimum pour chaque texte.

Tu peux orienter le résultat avec des options, ou simplement en français dans ta demande :

La musique et les bruitages sont fournis : 5 morceaux de la série « Happy Beats / Business Moves » d'ende.app et 260 effets sonores en licence CC0 (domaine public), la plupart de Kenney.

Chapitre 3, 1 min

Installer /brag et Hyperframes

Il te faut Node.js 22 ou plus et FFmpeg. Vérifie ta machine avec :

npx hyperframes doctor

Cette commande contrôle Node, FFmpeg et le Chrome sans fenêtre que Hyperframes télécharge lui-même.

Dans Claude Code, installe /brag en deux commandes :

/plugin marketplace add latent-spaces/brag
/plugin install brag@brag

Place-toi ensuite dans ton projet et lance le skill. Installé en plugin, il s'appelle /brag:brag dans la liste des commandes : c'est celle que j'ai lancée.

Avec un autre agent (Codex, Cursor, Gemini CLI, opencode...), une seule commande suffit :

npx skills add https://github.com/latent-spaces/brag --skill brag

Ajoute -g pour l'installer dans tous tes projets. Si tu utilises Codex, mon guide pour débuter avec Codex t'aidera à le prendre en main.

Installe aussi les skills de Hyperframes, dont le README de /brag ne parle pas :

npx skills add heygen-com/hyperframes

Sans eux, /brag se débrouille avec la documentation de Hyperframes, mais saute certains effets. Chez moi, les animations qui réagissent à la musique ont été abandonnées faute d'outil installé.

Sous Windows, tout fonctionne. Les commandes du skill sont écrites pour bash (Mac et Linux), et Claude les traduit en PowerShell. Un piège noté pendant ma séance : la commande Set-Content de PowerShell ajoute un caractère invisible (un BOM) en tête de fichier, qui cassait les variables du CSS. Claude l'a repéré et contourné.

Chapitre 4, 1 min

Ma première vidéo en 8 minutes 30

Le 17 septembre, j'ai lancé le skill sur le dossier de Sam Tennis, sans aucune option. Ce dossier contient l'app mobile, faite avec Expo (voir ma stack technique), et son site. 8 minutes 30 plus tard, j'avais une vidéo de 22,6 secondes en 1920x1080, avec musique, bruitages, vignette et texte de partage.

Le skill a lu les textes, les couleurs et les illustrations du site, puis il a trouvé son angle : Sam ne croit pas à tes excuses. La vidéo s'ouvre sur trois excuses barrées (« C'était le vent. », « Le soleil. », « Mon cordage. »), puis enchaîne la promesse de l'app, le chat avec Sam, une fiche d'analyse vidéo et le simulateur de classement, où un tap sur « Je gagne » valide le palier 30. Elle se termine sur le logo et la phrase « Ton prochain niveau commence après ton prochain match. ».

La vidéo de lancement de Sam Tennis, sortie de /brag sans option ni retouche. Musique : ende.app.

Avant le rendu, hyperframes check a bloqué de vrais défauts. Sur l'ensemble de ma séance, il a signalé des contrastes trop faibles (un texte à 1,18:1 là où il faut au moins 3:1), des textes qui se chevauchaient et un conflit entre deux animations. Claude a fait 2 à 4 corrections par vidéo avant de lancer le rendu.

Chapitre 5, 1 min

Une vidéo par fonctionnalité

Juste après, j'ai demandé la suite à Claude :

J'aimerais que tu me génères un /brag par fonctionnalité (et en version
horizontale et verticale à chaque fois) : le quiz, le simulateur de
classement, le chat, le mode match, les stats issues de Ten'Up, l'analyse
vidéo, l'analyse de raquette. Demande-moi s'il te manque des screenshots
ou des éléments.

Puis, quelques minutes plus tard : « Pense au fait que les vidéos vont être exploitées pour des Meta Ads ensuite. »

Voici ce que Claude a fait, et ce qu'il faut en retenir :

• /brag ne fait qu'une vidéo et un format par lancement. Pour 7 fonctionnalités en 2 formats, Claude a écrit un petit générateur qui reprend la méthode de /brag, ses musiques et ses bruitages. Chaque vidéo suit le même gabarit de 17 secondes : une question en accroche (3,2 s), l'écran de l'app animé dans un téléphone (10 s), puis la fin avec « Télécharger l'app ». Les deux formats sortent de la même source.
• Une app mobile demande des captures. /brag lit du code : pour un site, il trouve seul les textes et les visuels. Pour Sam Tennis, Claude a d'abord fait les vidéos pour lesquelles il avait assez d'éléments, pendant que je récupérais les captures des autres. Je lui ai envoyé 14 captures d'iPhone. Les écrans ne sont pas collés tels quels : Claude les recrée en HTML et en CSS, avec les vrais textes de l'app, pour pouvoir les animer.
• Les allers-retours restent courts. La vidéo des stats Ten'Up reprenait une ancienne version de l'écran : j'ai envoyé les bonnes captures et Claude l'a refaite. Même chose pour l'analyse vidéo, dont je n'avais pas encore donné les captures.
• Le contrôle visuel sert vraiment. Avant chaque rendu, Claude génère une planche d'images de la vidéo (npx hyperframes snapshot). Pour l'analyse vidéo, elle montrait un téléphone à l'écran vide : il l'a corrigé avant le rendu.

Entre ma demande et la dernière vidéo, il s'est passé 1 h 35, attente de mes captures comprise. Une fois le gabarit en place, compte 3 à 7 minutes par fonctionnalité, pour ses deux formats. Le rendu lui-même prend de 37 à 58 secondes par vidéo de 17 secondes sur mon PC.

L'analyse vidéo et le simulateur de classement, deux des 14 vidéos de fonctionnalités, en vertical. Musique : ende.app.

Ces vidéos sont en ligne depuis le 19 septembre sur la page de l'application de Sam Tennis, en vertical et sans le son. Pour la partie pub, je te renvoie à mon guide des Meta Ads pour une app mobile.

Chapitre 6, 1 min

Combien ça coûte ?

Les deux outils sont gratuits : /brag est sous licence MIT, Hyperframes sous licence Apache 2.0, et le rendu se fait sur ton ordinateur. La musique et les bruitages sont fournis.

Le vrai coût, c'est l'usage de Claude, et le skill n'en dit rien. Pour ma séance, avec Claude Opus 5 dans Claude Code :

• la première vidéo : environ 31 000 tokens écrits par Claude ;
• les 15 vidéos : environ 147 000 tokens écrits.

À ces chiffres s'ajoute le contexte relu à chaque étape : 29 millions de tokens lus depuis le cache sur la séance, qui coûtent beaucoup moins cher que les tokens écrits. Avec un abonnement Claude, tout ça entre dans tes limites d'usage. Retiens un ordre de grandeur, pas un tarif.

HeyGen propose aussi des options payantes, en crédits HeyGen : le rendu dans le cloud (hyperframes cloud render) et un connecteur MCP hébergé, en bêta. Je n'ai pas trouvé de tarif public dans la documentation au 23 septembre 2026. Les voix de HeyGen ou d'ElevenLabs se paient aussi, si tu veux une voix off de qualité.

Chapitre 7, 1 min

Les limites à connaître

• Des vidéos courtes : de 15 à 25 secondes. Une proposition de vidéos plus longues est restée en brouillon exprès dans le dépôt, pour garder le format court.
• Une vidéo et un format par lancement : pour une série, relance /brag ou demande à Claude d'automatiser, comme pour Sam Tennis.
• Pas de vraie capture de ton app : l'interface est recréée en HTML. Pour une app mobile, prépare des captures d'écran.
• Une seule voix française : la voix off (--voice) passe par Kokoro, qui tourne sur ton ordinateur avec Python et un modèle de 311 Mo. Sa voix par défaut est anglaise, et il n'a qu'une voix française. La personne qui maintient /brag a testé la voix off sans aimer le résultat : c'est pour ça qu'elle est désactivée par défaut.
• La musique demande un crédit : les morceaux d'ende.app sont sous licence CC BY 4.0, usage commercial compris. ende.app dit que le crédit est facultatif, mais les pages des morceaux le demandent encore : écris « Musique : ende.app ». Et ne les déclare pas dans le Content ID de YouTube, c'est interdit.
• Hyperframes bouge vite : le skill appelle npx hyperframes sans fixer de version. Chaque nouveau lancement prend la dernière, et il en sort plusieurs par jour.

Chapitre 8, 1 min

Hyperframes ou Remotion ?

Remotion est l'outil historique pour créer des vidéos avec du code, et il a aussi des skills pour les agents depuis janvier 2026. La documentation de Hyperframes reconnaît elle-même qu'il est plus établi : plus de modèles, plus de tutos, un rendu dans le cloud plus mûr.

Prix de la licence Remotion et téléchargements npm relevés entre le 21 et le 23 septembre 2026.

Pour une vidéo courte de ton produit, /brag et Hyperframes suffisent, gratuitement quelle que soit la taille de ton équipe. Pour des vidéos longues ou beaucoup de rendus dans le cloud, Remotion reste plus mûr.

Chapitre 9, 1 min

Questions fréquentes

Hyperframes est-il gratuit ?

Oui. Hyperframes est sous licence Apache 2.0, et le rendu sur ton ordinateur ne consomme aucun crédit HeyGen. Seuls le rendu dans le cloud de HeyGen et ses voix se paient, en crédits HeyGen.

/brag marche-t-il avec Codex ou Cursor ?

Oui. Installe-le avec npx skills add https://github.com/latent-spaces/brag --skill brag : la commande le range là où ton agent cherche ses skills (Codex, Cursor, Gemini CLI, opencode...). Dans Claude Code, passe plutôt par /plugin.

Peut-on faire une voix off en français avec /brag ?

Oui, avec l'option --voice, mais elle passe par Kokoro, qui n'a qu'une voix française. Pour une voix plus naturelle, utilise Hyperframes directement avec une voix ElevenLabs ou HeyGen : /brag ne le propose pas.

Faut-il savoir coder pour utiliser /brag ?

Non. Il faut installer Node.js et FFmpeg, puis lancer une commande. La vidéo est une page web que tu peux retoucher, mais tu peux aussi demander les changements à Claude, en français.

/brag marche-t-il pour une app mobile ?

Oui, mais il lit du code, pas ton téléphone. Pour Sam Tennis, il s'est appuyé sur le site de l'app pour la première vidéo, puis sur 14 captures d'écran que je lui ai fournies pour les vidéos de fonctionnalités.

Quelle différence entre Hyperframes et Remotion ?

Hyperframes transforme du HTML en vidéo et reste gratuit pour tout le monde. Remotion s'écrit en React, il est plus ancien et plus répandu, et il devient payant au-delà de 3 personnes dans l'entreprise, à partir de 25 $ par siège et par mois.

Chapitre 10, 1 min

Pour finir

Ce que je retiens de ce test :

• La première vidéo arrive vite : 8 minutes 30, sans aucun réglage.
• Pour une série, Claude prend le relais : /brag donne la méthode, Claude automatise le reste.
• Les contrôles avant le rendu attrapent de vrais défauts : contrastes, textes qui se chevauchent, écran vide.
• Pour une app mobile, prépare tes captures, et passe à la version 0.3.0 avant de te lancer.

Pour les réseaux, je faisais jusqu'ici des vidéos IA de Sam avec ElevenLabs, Kling et CapCut (150 000 vues pour 33 € par mois). /brag fait autre chose : des démos de mon produit, tirées de son code. Pour découvrir d'autres skills, jette un œil à ma sélection des meilleurs Skills Claude.

À très vite,

Guillaume 👋

Le lien ElevenLabs de cet article est affilié : si tu t'abonnes via ce lien, je touche une commission, sans surcoût pour toi. Les liens vers /brag, Hyperframes, HeyGen, Remotion, ende.app et Kenney ne sont pas affiliés.