HyperFrames dans Claude Code : le guide d'installation

Le guide d'installation de HyperFrames dans Claude Code, avec les deux commandes et le prompt exact pour sortir ton premier MP4.

Ce que c'est

HyperFrames est un outil open source de HeyGen : tu écris une vidéo en HTML, il la rend en vrai fichier MP4. Claude Code écrit le HTML, HyperFrames fait le rendu.

Gratuit, open source, licence Apache 2.0
Plus de 66 000 étoiles sur GitHub
2,7 millions de téléchargements par mois
Tourne en local (Chrome sans interface + ffmpeg)
Dépôt : https://github.com/heygen-com/hyperframes
Site : https://hyperframes.dev

Étape 1 : ajouter le marketplace

Dans Claude Code :

claude plugin marketplace add heygen-com/hyperframes

Étape 2 : installer le plugin

claude plugin install hyperframes@hyperframes

Étape 3 : lancer la commande

Dans Claude Code, tape :

/hyperframes

Étape 4 : le prompt exact

C'est celui qui est donné dans le README du dépôt, recopie-le tel quel :

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

Claude écrit alors un fichier HTML du type :

<div class="clip" data-start="0" data-duration="3">
  <h1 class="title">Launch day</h1>
</div>
<script>
  tl.from(".title", {opacity: 0})
</script>

Puis HyperFrames le rend en intro.mp4.

Ce que tu peux lui demander

Demande	Résultat
Intro de produit	Logo + titre animé en quelques secondes
Titres et sous-titres	Texte animé posé sur ta vidéo
Course de graphiques	Barres animées à partir de tes chiffres
Habillage de marque	Tes couleurs et ta police reprises partout

Les autres commandes utiles

Une fois le plugin installé, Claude Code te donne aussi :

/hyperframes-cli pour piloter le rendu en ligne de commande
/gsap pour les animations
website-to-video pour transformer une page en vidéo
product-launch-video pour un lancement de produit

Trois conseils de rendu

Demande une durée précise (10 secondes, 15 secondes), le rendu est plus propre.
Garde tes fichiers (musique, logo) dans le même dossier que le HTML.
Relis le HTML, change un mot, relance le rendu : ça prend quelques secondes et ça ne coûte rien.

Une question ? Réponds directement à ce message privé, je te réponds.