Montez des vidéos avec Claude Code : le guide complet avec HyperFrames

Il est désormais possible de monter une vidéo depuis la ligne de commande, simplement en décrivant ce que vous voulez. HyperFrames, le framework gratuit et open source de HeyGen, transforme Claude Code en éditeur vidéo : vous décrivez le montage, il écrit le code, anime et rend le tout en MP4. Sans ouvrir CapCut ni Premiere.

Ce guide vous emmène de zéro à votre première vidéo à l'allure professionnelle, avec des prompts prêts à copier et à adapter à votre cas.

Qu'est-ce que c'est et comment ça marche

HyperFrames est un framework open source (Apache 2.0) qui permet aux agents d'IA de composer des vidéos en écrivant du HTML, du CSS et du JavaScript. Comme les modèles sont déjà excellents pour écrire du code web, monter une vidéo revient simplement à « écrire une page et l'animer ».

Quelque chose d'important à comprendre : Claude Code ne « voit » pas votre vidéo et ne génère pas d'images par lui-même. Claude est le réalisateur et l'orchestrateur. Il travaille avec deux composants :

• Le framework (gratuit) : HyperFrames assemble la composition, le timing, les sous-titres, les transitions, les zooms et le rendu final en MP4.
• Les connexions externes (optionnelles) : ElevenLabs pour des voix premium, Kie.ai pour des images IA, Suno pour de la musique générée.

L'astuce de la synchronisation : au lieu de « voir » la vidéo, Claude la transcrit avec Whisper et génère des timestamps millimétrés mot par mot. Avec ces temps exacts, il peut caler un sous-titre, une image ou un effet sonore à la milliseconde près. C'est pour ça que les coupes et les effets sonores tombent parfaitement.

Bonne nouvelle : les voix TTS avec Kokoro, la transcription et tout le rendu tournent en local et gratuitement. Vous n'avez besoin des API payantes que si vous voulez monter en qualité ou produire à grande échelle.

Prérequis et installation

Avant de commencer, il vous faut :

• Claude Code installé (application desktop, terminal, VS Code ou là où vous l'utilisez).
• Node.js 22 ou supérieur : vérifiez-le avec node --version
• FFmpeg : pour encoder le MP4 final (brew install ffmpeg sur Mac ; sur Windows, selon votre système).

Installation recommandée

Créez un dossier pour votre projet et ouvrez-le dans Claude Code. Exécutez cette commande ou dites-le directement à Claude :

npx skills add heygen-com/hyperframes

Bonjour, installe s'il te plaît le skill HyperFrames dans ce projet.
Exécute : npx skills add heygen-com/hyperframes
Quand c'est terminé, redémarre la session et confirme-moi que les slash commands ont bien été enregistrées.

Les slash commands qui s'enregistrent

• /hyperframes : Écriture de la composition : structure, timing, captions, transitions, TTS.
• /hyperframes-cli : Cycle de travail : init, lint, preview, render.
• /hyperframes-media : Prétraitement des assets : TTS, transcription, suppression du fond.
• /website-to-hyperframes : Convertir une URL complète en vidéo.
• /gsap : Aide à l'animation : timelines, easing, mouvement.

Votre première vidéo, pas à pas

Il y a trois façons de démarrer :

1. De site web à vidéo : vous lui donnez une URL et HyperFrames assemble une publicité complète. Idéal pour un premier résultat rapide.
2. Monter votre enregistrement : vous avez un MP4 et vous voulez des captions, des overlays, de la musique et des images. Le cas le plus utile au quotidien.
3. Créer de zéro : vous décrivez la vidéo et Claude la construit entièrement : titres, motion graphics, narration et musique.

Le flux recommandé

1. Créez le dossier du projet et ouvrez-le dans Claude Code. Si vous allez monter un MP4, glissez-le dans ce dossier. Tout est en local.
2. Donnez le premier prompt. Dites-lui ce que vous avez et ce que vous voulez. Demandez-lui de vous poser des questions avant de commencer.
3. Claude transcrit avec Whisper et génère des timestamps millimétrés. Sur cette base, il synchronise tout.
4. HyperFrames Studio s'ouvre avec un aperçu en direct. Si le lien n'apparaît pas, dites-lui « lance mon serveur local ».
5. Itérez avec des changements petits et concrets jusqu'à ce que le résultat vous plaise.
6. Rendu final : demandez « fais le rendu en haute qualité » ou utilisez le bouton d'export dans l'aperçu.

En utilisant /hyperframes : j'ai un MP4 nommé demo.mp4 dans ce projet. C'est une intro que j'ai enregistrée face caméra, en français, au format horizontal 16:9.

Je veux qu'on la monte ensemble. Ajoute-lui :
- Des captions automatiques synchronisés avec ce que je dis
- Un overlay en haut qui dit « Monté par Claude Code »
- Une musique de fond douce qui ne couvre pas ma voix
- Un fondu au noir à la fin

Avant de commencer, transcris la vidéo avec Whisper pour avoir des timestamps millimétrés. Si tu as des doutes, pose-moi la question. Et si tu as besoin d'un accès ou d'une API, préviens-moi.

Avant de générer quoi que ce soit avec /hyperframes, fais-moi un storyboard en HTML : liste les scènes avec leur durée, le texte de chaque sous-titre, quelle image ou quel overlay y va et la direction du plan (zoom, transition). Je le relis, je te corrige et c'est seulement là qu'on le construit. Comme ça, on ne dépense pas de tokens en trop.

Bibliothèque de prompts

HyperFrames fait correspondre des adjectifs en langage naturel à des paramètres techniques du framework. Pas besoin de connaître le code : utiliser le bon mot vous donne le bon résultat.

Captions et sous-titres

Décrivez l'énergie des sous-titres et Claude choisit la typographie, la taille et l'animation :

• Hype : Bold épaisse, scale-pop, 72-96px
• Corporate : Sans épurée, fade + slide, 56-72px
• Tutorial : Monospace, typewriter, 48-64px
• Storytelling : Serif, fade lent, 44-56px
• Social : Arrondie, bounce, 56-80px

Mets des captions style hype avec scale-pop, mot par mot, synchronisés avec ma voix. Mets les noms de marque en plus grand et en couleur d'accent, donne du bounce aux mots émotionnels et fais ressortir les chiffres différemment. Corrige les mots mal transcrits et assure-toi que les sous-titres ne se chevauchent PAS.

Passe les captions en style karaoké : chaque mot doit s'illuminer au moment exact où je le dis. Garde 4-5 mots maximum à l'écran à la fois pour que ça se lise bien sur mobile.

Surlignage à la main (marker highlights)

• highlight : Coup de marqueur sur les phrases clés
• circle : Ellipse tracée à la main autour d'un mot
• burst : Lignes qui rayonnent pour les moments hype
• scribble : Rature chaotique pour barrer quelque chose
• sketchout : Cadre dessiné pour les callouts

Ajoute un marker highlight façon coup de marqueur jaune sur la phrase « totalement gratuit », entoure « Claude Code » d'un cercle dessiné à la main et mets des burst lines autour de « sans ouvrir CapCut ».

Images générées par IA dans la vidéo

Claude peut générer des images avec l'IA et les monter en synchronisation avec votre script. Le service recommandé est Kie.ai (une marketplace à crédits qui inclut aussi Suno pour la musique).

Je veux ajouter des images générées par IA à la vidéo. Tu te charges de les générer avec Kie.ai (je te passe la documentation et ma clé API). Étapes :
1. Analyse la transcription et décide quelles images valent la peine et à quel moment elles vont.
2. Génère un script pour les créer EN PARALLÈLE (toutes en même temps).
3. Insère-les en synchronisation avec ce que je dis.

Style : hand-written, faites à la main, couleurs neutres, personnages en bâtonnets. Je veux quelque chose de visuel que même un enfant comprendrait. Rien de corporate. Horizontales, couvrant tout l'écran.

Pour la scène d'ouverture, je te donne logo.png (il est dans le projet). Intègre-le là. J'ai le côté gauche et le côté droit du cadre de libres. Si tu veux, prends une capture de cette frame pour voir la répartition et place-le là où il s'insère sans cacher mon visage.

Colorisation et étalonnage

Comme HyperFrames rend du HTML/CSS, l'étalonnage s'applique avec des filtres CSS et des calques en blend modes. C'est comme une LUT légère : rapide, non destructive et réversible.

Applique au clip un étalonnage cinématographique teal & orange avec des filtres CSS : monte un peu le contraste (~1.1) et la saturation (~1.15), pousse les ombres vers le cyan-bleu et les tons de peau vers le chaud. Ajoute un calque de dégradé subtil avec un blend mode « teal dans les ombres / orange dans les lumières ». Veille à ce que ma peau reste naturelle. Montre-moi l'avant et l'après en aperçu.

Autres looks disponibles :

• Warm vintage : « étalonnage chaud avec grain fin et légère vignette »
• Clean tech : « étalonnage froid, contraste élevé, blancs propres »
• Moody / ciné : « ombres écrasées, faible saturation, vignette marquée »
• Pastel soft : « baisse le contraste, relève les ombres, ton pastel »
• Punchy social : « sature fort, contraste élevé, des couleurs qui sautent »
• B&W editorial : « noir et blanc avec un contraste éditorial »

Définis une palette de marque (je te passe 2-3 couleurs) et applique-la de façon cohérente : sous-titres, overlays, fonds des images IA et étalonnage. Que la vidéo donne l'impression d'un seul bloc. Utilise des variables CSS pour les couleurs, comme ça on les ajuste vite.

Audio : voix, musique et effets

Le TTS tourne en local et gratuitement avec Kokoro (sans clé API). Pour une qualité premium, connectez ElevenLabs.

Génère la narration de ce script avec le TTS local (Kokoro). Utilise une voix professionnelle et chaleureuse, à 1.0x, et synchronise-la avec les scènes. Laisse des respirations naturelles entre les phrases.

La voix off gratuite ne m'a pas plu. Génères-en une nouvelle avec ElevenLabs (je te passe ma clé API). Choisis une voix qui sonne familière et agréable en français, ajuste le timing aux scènes. Ne fais pas encore le rendu, donne-la-moi seulement en aperçu pour que je l'écoute d'abord.

Utilise assets/musica.mp3 comme musique de fond. Baisse son volume pour qu'elle reste sous ma voix (ducking), monte-la un peu dans l'intro et l'outro, et fais un fade-in au début et un fade-out à la fin.

Je te donne le dossier assets/sfx avec plusieurs effets sonores nommés d'après ce qu'ils font. Analyse-le et place-les en synchronisation : le « click » quand un mot surligné apparaît, un « whoosh » sur les transitions fortes et un « pop » quand le logo entre. Qu'ils tombent pile sur le timestamp, ni avant ni après.

Rapprochements, zoom et mouvement

La différence entre une vidéo amateur et une vidéo pro tient souvent au mouvement. Décrivez comment le mouvement doit se ressentir et Claude choisit le bon easing.

Vocabulaire du mouvement :

• smooth : Décélération naturelle (standard)
• snappy : Rapide et décidé (énergie élevée)
• bouncy : Rebondit et se pose (dynamique)
• dramatic : Départ fort, long glissement (emphase)
• dreamy : Lent et symétrique (cinématographique)

Mets un effet Ken Burns subtil sur toutes les images : alterne zoom-in et zoom-out lents, et un panoramique doux de gauche à droite. Mouvement dreamy, lent (1-2s). Quand deux images se suivent, fais une transition entre elles.

Au moment où je dis « totalement gratuit », fais-moi un punch-in rapide (snappy, 0.2s) sur mon visage pour appuyer, et reviens au plan normal après la phrase. Que ça paraisse intentionnel, pas brusque.

Ajoute des transitions entre toutes les scènes (les coupes sèches passent pour une erreur). Pour les parties informatives, utilise des crossfades calmes ; pour le reveal final, utilise un zoom dramatique. 2 types maximum pour garder de la cohérence.

Styles de vidéo

Une vidéo a l'air pro quand elle a une seule identité claire. Nommez le style dans votre premier prompt et tout (typographie, couleur, motion, transitions) s'aligne tout seul :

• Warm grain / analogique : Chaud, grain fin, serif élégante. Pour le storytelling et le lifestyle.
• Minimal Swiss / éditorial : Grille épurée, sans neutre, coupes précises. Pour expliquer avec sérieux.
• High-energy social : Captions hype, scale-pop, SFX, zooms rapides. Pour TikTok / Reels / Shorts.
• Hand-drawn / sketch : Illustrations à la main, personnages en bâtonnets. Pour des explainers accessibles.
• Cold tech / clinique : Froid, contraste élevé, monospace. Pour du produit / SaaS.
• Cinematic / ciné : Teal-orange, motion lent, vignette. Pour les hero videos et les trailers.

Le style de toute la vidéo est [high-energy social]. Applique-le de façon cohérente : typographie assortie, captions hype avec scale-pop, étalonnage punchy, transitions rapides façon whip-pan et SFX sur les moments d'emphase. Si quelque chose sort de ce mood, ajuste-le pour que tout s'accorde.

Rendu et export

Itérez toujours en qualité draft et réservez le high pour la fin :

• draft : Pour itérer vite (économise ressources et tokens)
• standard : Pour relire et demander des retours
• high : Pour la livraison finale

npx hyperframes render --output final.mp4

Ça me plaît. Fais le rendu en haute qualité et télécharge-le-moi. Ensuite, génère une variante verticale 9:16 pour Reels : transforme le format, réorganise les textes et le cadrage pour que ça rende bien sur mobile.

Passer à l'échelle de la production

La première vidéo est la plus lente. La vraie puissance apparaît quand vous transformez un résultat qui vous enchante en skill réutilisable : ensuite, vous lui donnez seulement le matériel et il fait tout.

J'ai adoré le résultat de ce montage. Crée un skill qui capture tout ce flux : transcrire, captions style X, générer des images hand-drawn, étalonnage teal-orange, Ken Burns sur les images, SFX depuis mon dossier, musique et fondu final. Documente les étapes pour que la prochaine fois je te donne seulement un nouveau MP4 et que tu le montes pareil sans que je répète quoi que ce soit.

J'ai une nouvelle vidéo, clip-02.mp4, dans le projet. Monte-la avec mon skill de montage. Préviens-moi quand elle est en aperçu.

Checklist avant le premier rendu final

• Claude Code + Node 22 + FFmpeg installés ; skill HyperFrames enregistré
• MP4 ou matériel dans le dossier du projet ; noms clairs
• Storyboard approuvé avant de rendre
• Captions synchronisés, sans chevauchement, avec des surlignages sur les mots clés
• Étalonnage cohérent sur toutes les scènes
• Voix au-dessus de la musique (ducking) ; SFX sur les bons timestamps
• Du mouvement partout : Ken Burns, punch-ins, 2 types de transition maximum
• Un seul style du début à la fin
• Rendu en high + variante de format si vous en avez besoin
• Skill créé pour le répéter à l'échelle sans répéter les instructions

Sources : documentation officielle de HyperFrames (HeyGen). HyperFrames est open source (Apache 2.0). Les API externes (ElevenLabs, Suno, Kie.ai) sont optionnelles et payantes.