Créer une vidéo en motion design avec l’IA : le guide HyperFrames

Vous voulez présenter un service, expliquer une application ou annoncer un événement. Vous avez le message, quelques images et peut-être une identité visuelle. Il vous manque la vidéo qui donne envie de regarder.

Une nouvelle méthode permet de construire cette animation en discutant avec un agent IA : vous décrivez les scènes, il écrit le code, puis un outil comme HyperFrames transforme le projet en MP4.

L’intérêt dépasse la première génération. Le titre, les couleurs et le rythme restent modifiables dans le projet source. Vous pouvez demander de ralentir une transition ou de remplacer une capture sans repartir systématiquement de zéro.

Dans ce tutoriel, nous allons préparer un premier projet, puis explorer trois façons de travailler : partir d’un prompt, animer des images et utiliser des vidéos comme références.

Les commandes et conditions présentées ont été vérifiées dans les sources officielles le 28 octobre 2026. Le parcours ci-dessous est documenté ; il n’a pas fait l’objet d’un rendu vidéo de test pour cet article.

Comment une IA transforme-t-elle un prompt en motion design ?

Le motion design consiste à mettre des éléments graphiques en mouvement : textes, illustrations, interfaces, graphiques ou photographies.

Imaginez une présentation de trois écrans. Sur le premier, une question apparaît. Sur le deuxième, une capture d’application arrive dans un cadre de téléphone. Sur le troisième, un bouton invite à découvrir le service.

Pour produire cette séquence, il faut définir les éléments, leur position et leur évolution dans le temps.

Avec HyperFrames, ces instructions prennent la forme de HTML, de CSS et d’animations pilotables dans le temps. Le moteur effectue ensuite le rendu vidéo. L’agent IA sert à concevoir et modifier ce code à partir de vos demandes. GitHub

Cela explique une distinction importante :

• L’agent IA interprète votre brief et écrit le projet.
• HyperFrames organise la composition et permet son rendu.
• Les médias — images, musique, voix — peuvent venir de vos fichiers ou de services supplémentaires.

Vous n’avez pas forcément besoin de programmer vous-même. Vous devez toutefois apprendre à décrire ce que vous voulez et à contrôler ce que l’agent livre.

Animer une image n’est pas forcément générer une scène vidéo

Une photographie peut glisser, pivoter ou recevoir un léger zoom. Des légendes peuvent apparaître autour d’elle. Cela suffit déjà à créer une présentation animée.

En revanche, demander à une personne photographiée de se retourner ou de parler suppose un autre traitement, généralement une génération vidéo ou une animation spécialisée.

Même distinction pour une capture d’application : déplacer la capture est simple ; faire fonctionner ses boutons demande de reconstruire ou de simuler l’interface.

Cette différence évite de commander un film entier alors que l’outil prépare surtout une composition graphique.

HyperFrames ou Remotion : lequel choisir ?

Les deux permettent de produire des vidéos avec du code et proposent des instructions spécialisées pour les agents IA. Leur approche diffère : HyperFrames s’appuie notamment sur les technologies web HTML/CSS, tandis que Remotion permet de composer des vidéos avec React. Les skills officiels de Remotion accompagnent la création, les animations et le rendu. GitHub

Pour ce tutoriel, nous retenons HyperFrames afin de suivre un seul parcours.

Est-ce vraiment gratuit ?

Il faut séparer le moteur vidéo du reste de la chaîne.

La documentation de démarrage HyperFrames présente l’outil comme gratuit, mais précise que l’agent IA possède sa propre facturation. Les médias HeyGen demandés en complément peuvent aussi consommer des crédits. HyperFrames

Remotion possède ses propres conditions : la page officielle des licences annonce un usage gratuit pour les particuliers et les entreprises jusqu’à trois personnes, sous réserve des conditions applicables. Une licence payante concerne les organisations qui ne remplissent pas ces critères. Remotion

Votre budget peut donc comprendre l’agent, la génération d’images ou de voix, les médias sous licence et, éventuellement, une infrastructure de rendu.

Un moteur gratuit ne garantit pas une production sans frais.

Préparer votre espace de travail

HyperFrames propose plusieurs portes d’entrée, dont une application Studio et un parcours avec un agent qui travaille dans un dossier. Nous allons utiliser ce second chemin : il permet de comprendre où se trouvent les fichiers et comment relancer le rendu. Les options sont détaillées dans le guide officiel de démarrage. HyperFrames

1. Vérifier que votre agent peut exécuter des commandes

Un agent de développement doit pouvoir lire et modifier les fichiers du projet, lancer des commandes et récupérer le résultat.

Coller une commande dans un chat ne suffit pas si ce chat ne possède pas ces capacités.

Pour le parcours local présenté ici, le centre d’aide HeyGen indique notamment Node.js 22 ou supérieur, npm/npx et FFmpeg. HeyGen Help Center

Ouvrez Terminal sur macOS ou Linux, ou PowerShell sur Windows. Vérifiez les dépendances :

node --version
npm --version
ffmpeg -version

Chaque commande doit afficher une version. Si le système indique qu’un programme est introuvable, installez-le avant de poursuivre. Fermez puis rouvrez le terminal après l’installation si nécessaire.

2. Créer un projet dédié

Créez un dossier nommé video-atelier, puis ouvrez-le dans votre agent.

Gardez ce projet séparé de vos autres travaux. Vous pourrez y retrouver le code, les captures et les exports.

Installez les instructions HyperFrames avec la commande proposée par le démarrage officiel :

npx skills add heygen-com/hyperframes

Dans le sélecteur, choisissez les instructions principales, désignées comme Core Skills. Rouvrez ensuite la session de votre agent si elles ne sont pas immédiatement disponibles.

Un skill est un ensemble de consignes spécialisées : il explique à l’agent comment construire un projet compatible. Son installation prépare le travail ; elle ne produit pas encore le MP4. HyperFrames

3. Demander une vérification avant de créer

Vous pouvez maintenant copier ce premier message :

Prépare ce dossier pour un projet HyperFrames.

Vérifie les dépendances disponibles et les instructions HyperFrames installées.
Si une dépendance manque, explique précisément laquelle.

Crée un projet de départ simple, puis indique :
- le dossier du projet ;
- le fichier principal à modifier ;
- la commande pour ouvrir l’aperçu ;
- la commande pour produire le MP4.

Ne génère aucun média payant.

Cette étape donne un point de départ vérifiable. Avant de demander une publicité ambitieuse, assurez-vous qu’un projet minimal s’ouvre correctement.

Méthode 1 : créer une vidéo à partir d’un prompt

Pour un premier essai, prenons un atelier fictif : « Votre premier assistant IA », destiné aux indépendants.

L’objectif est limité : présenter le sujet en vingt secondes et inviter à consulter le programme. Pas de faux témoignages, pas de chiffres inventés, pas de promesse de revenus.

1. Transformer l’idée en brief

« Fais une vidéo impressionnante » laisse beaucoup de place à l’improvisation. Un brief exploitable précise le public, le message, la durée et les contraintes visuelles.

Utilise HyperFrames pour préparer une vidéo de présentation
d’un atelier fictif intitulé « Votre premier assistant IA ».

Public : indépendants débutants.
Objectif : donner envie de consulter le programme.
Durée : 20 secondes.
Format : horizontal, 1920 × 1080, 30 images par seconde.

Direction visuelle :
- fond bleu nuit ;
- accents violets discrets ;
- typographie sans empattement lisible ;
- animations sobres ;
- une idée principale par scène.

Déroulé souhaité :
0–5 s : « Trop de tâches répétitives ? »
5–10 s : « Découvrez ce qu’un assistant IA peut prendre en charge. »
10–15 s : « Construisez un premier exemple adapté à votre activité. »
15–20 s : « Consultez le programme de l’atelier. »

N’invente ni date, ni prix, ni témoignage, ni résultat chiffré.
N’ajoute pas de musique ou de voix payante.

Commence par proposer le storyboard et les textes exacts.
Attends leur validation avant de construire l’animation.

Le découpage est une proposition de travail. Si une phrase demande trop de temps de lecture, corrigez-la avant l’animation.

C’est souvent là que se gagne la qualité : un message clair avec trois mouvements bien choisis fonctionne mieux qu’une accumulation d’effets.

2. Construire une première version simple

Après validation du storyboard :

Construis la vidéo selon le storyboard validé.

Utilise des éléments graphiques simples.
Conserve les textes dans des éléments séparés et modifiables.
Prévois des marges généreuses.
Évite les mouvements permanents pendant la lecture.

Ouvre l’aperçu et indique les fichiers créés.

Contrôlez d’abord le film sans musique. Comprend-on immédiatement le sujet ? Les textes restent-ils assez longtemps ? Le dernier écran donne-t-il une action claire ?

L’audio peut améliorer le rythme. Il ne devrait pas servir à masquer un message confus.

3. Exporter le MP4

La documentation de la CLI présente les commandes d’aperçu, de contrôle structurel et de rendu. Depuis le dossier contenant la composition :

npx hyperframes preview

Puis :

npx hyperframes lint

Enfin :

npx hyperframes render --output atelier-ia-v1.mp4

Le contrôle lint recherche des problèmes de structure. Il ne remplace pas une vérification visuelle. Le rendu crée le fichier vidéo à regarder avant diffusion. hyperframes.app

Ouvrez le MP4 dans un lecteur vidéo et regardez-le jusqu’au bout. Une prévisualisation réussie n’est pas encore la preuve que l’export est correct.

Méthode 2 : animer des images et des captures d’écran

Cette approche convient aux démonstrations d’outils, aux présentations de produits et aux tutoriels courts.

La méthode consiste à fournir des captures et à construire une narration autour d’elles. Pour votre propre projet, partez de médias que vous pouvez utiliser et de fonctionnalités vérifiées.

1. Préparer les médias

Placez vos fichiers dans un dossier assets. Donnez-leur des noms explicites, par exemple accueil.png, creation-assistant.png et resultat.png.

Privilégiez des captures nettes. Retirez les données personnelles et les informations sans rapport avec la démonstration.

Pour chaque image, ajoutez une phrase expliquant ce qu’elle montre. Cette petite préparation réduit le risque que l’agent invente le sens d’un bouton ou d’un indicateur.

2. Décrire le rôle de chaque capture

Crée une vidéo HyperFrames de 25 secondes à partir des captures
du dossier assets.

Sujet : montrer les trois étapes de création d’un assistant IA.

Utilise :
- accueil.png pour présenter le point de départ ;
- creation-assistant.png pour montrer le paramétrage ;
- resultat.png pour montrer le résultat.

Conserve les proportions des captures.
Ne réécris pas leurs textes et ne déforme pas l’interface.
Utilise des cadres, des déplacements et des zooms légers.
Ne simule aucune fonctionnalité absente des captures.

Pour chaque scène, propose une légende courte.
Signale si une capture est trop peu définie pour rester lisible.

Une capture complète devient vite illisible dans un téléphone miniature. Demandez alors un cadrage sur la zone utile, précédé d’une vue d’ensemble pour situer le lecteur.

3. Choisir ce qui doit réellement bouger

Une capture reste une image aplatie. L’agent peut déplacer l’ensemble, ajouter un curseur ou révéler une zone avec un masque.

Pour faire évoluer indépendamment un bouton ou un panneau, il doit généralement reconstruire ces éléments ou disposer de médias séparés.

Décidez donc selon votre objectif :

• Pour expliquer une interface, une capture animée peut suffire.
• Pour prouver une manipulation, utilisez plutôt un enregistrement réel.
• Pour présenter un concept, une interface simplifiée peut fonctionner, à condition de la distinguer du produit réel.

Ce choix évite une jolie démonstration qui montre finalement quelque chose que l’application ne fait pas.

Méthode 3 : utiliser une vidéo comme référence

Une référence aide à transmettre une intention difficile à décrire : une cadence, une façon d’introduire les titres, une ambiance ou un mouvement de caméra.

Mais « fais pareil » laisse une ambiguïté considérable.

1. Expliquer ce que vous retenez

Choisissez deux ou trois références et annotez-les :

Première référence : j’aime les titres qui restent immobiles assez longtemps pour être lus.

Deuxième référence : je retiens les transitions entre les captures et les schémas.

Troisième référence : je souhaite une palette aussi sobre, avec moins de mouvements.

Vous transformez une préférence en décisions de mise en scène.

Si l’agent ne peut pas lire la vidéo liée, fournissez un fichier ou quelques captures accompagnées de timecodes. Demandez-lui de signaler ce qu’il a effectivement pu consulter.

2. Séparer l’analyse de la création

Analyse les références fournies avant de créer ma vidéo.

Pour chacune, relève uniquement les éléments que tu peux observer :
- rythme ;
- typographie ;
- composition ;
- transitions ;
- relation entre image et voix.

Indique les références auxquelles tu n’as pas accès.

Propose ensuite une direction originale pour mon projet.
Reprends des principes de mise en scène, sans recopier les textes,
les logos ou les illustrations.

Présente le storyboard avant de produire l’animation.

Vous pourrez ensuite valider une direction cohérente, au lieu de découvrir un mélange de trois styles au moment de l’export.

Ajouter une voix off et la synchroniser

La voix change la durée du film. Une phrase facile à lire peut sembler longue à l’oral ; un terme technique peut nécessiter une pause.

Pour une première production, vous pouvez enregistrer votre voix et fournir le fichier à l’agent. Vous gardez ainsi la main sur le ton et la prononciation.

Si vous utilisez une synthèse vocale, vérifiez le service disponible, ses conditions et son coût. La connexion décrite dans une démonstration ne sera pas nécessairement présente dans votre environnement.

Travaillez dans cet ordre :

1. Validez le texte.
2. Enregistrez ou générez la voix.
3. Écoutez-la intégralement.
4. Ajustez le minutage des scènes.
5. Ajoutez les sous-titres et la musique éventuelle.

Utilise narration.wav comme référence de synchronisation.

Adapte les scènes aux phrases réellement prononcées.
Fais apparaître chaque illustration au moment où elle est évoquée.
Préserve un temps de lecture suffisant pour les textes.

Signale si la durée prévue est incompatible avec la narration.
Ne coupe pas les phrases pour forcer la durée.

Si l’ensemble déborde, raccourcissez le script ou allongez la vidéo. Accélérer la voix jusqu’à la rendre inconfortable résout rarement le problème.

Corriger la vidéo sans repartir de zéro

La modification devient plus simple lorsque le projet conserve des éléments séparés et clairement organisés.

La transcription présente une interface personnelle appelée Editing OS pour recueillir les retours. Elle n’est pas nécessaire à la méthode : une liste de corrections avec des timecodes constitue déjà un bon outil de travail.

Donner un retour localisé

« Rends ça plus professionnel » exprime une insatisfaction. Cela ne dit pas quoi réparer.

Un retour utile associe un moment, un élément et une modification :

Applique ces corrections au projet actuel :

1. À 00:04, augmente le contraste du sous-titre.
2. De 00:08 à 00:11, ralentis le zoom sur la capture.
3. Sur le dernier écran, remplace « En savoir plus »
   par « Consultez le programme ».
4. Vérifie que tous les textes restent entièrement dans le cadre.

Conserve les scènes déjà validées.
Exporte une nouvelle version nommée atelier-ia-v2.mp4.

Conservez aussi une copie du projet avant une modification importante. L’agent peut résoudre un problème et en introduire un autre.

Garder les fichiers sources

Le MP4 est le résultat final aplati. Il ne contient pas tous les éléments modifiables du projet.

Pour pouvoir reprendre le travail, conservez le code, les médias, les polices autorisées, le script et les informations nécessaires au rendu.

Une vidéo réutilisable commence par un projet que vous pouvez rouvrir.

Réutiliser une bibliothèque d’animations

HyperFrames dispose d’un registre de blocs et de composants. Les blocs sont des sous-compositions ; les composants peuvent fournir des effets à intégrer dans une scène. Leur installation ne dispense pas de les raccorder et de les adapter au projet. Le guide officiel du registre décrit cette distinction. GitHub

Demandez à l’agent de rechercher un élément précis :

Cherche dans le registre HyperFrames un composant adapté
à un graphique simple.

Présente son intérêt pour cette scène avant de l’installer.
Après installation, intègre-le au projet et vérifie son timing,
ses couleurs et sa lisibilité.

N’ajoute aucun effet sans rôle dans l’explication.

Une bibliothèque devient utile lorsqu’elle évite de reconstruire un élément courant. En accumuler des centaines ne garantit pas une meilleure vidéo.

Votre propre modèle peut d’ailleurs devenir la ressource la plus précieuse : une introduction, trois compositions de contenu et un écran final déjà adaptés à votre identité.

Les outils et ressources utiles

Outil	À quoi sert-il dans ce tutoriel ?
Claude	Préparer le script et le storyboard. Pour modifier les fichiers et lancer le rendu, utiliser un environnement équipé comme Claude Code.
HyperFrames	Construire des compositions animées avec les technologies web, les prévisualiser et les exporter en vidéo.
Remotion	Une alternative pour créer des vidéos avec du code React, également accompagnée de skills pour les agents IA.
Google Flow	L’outil créatif vidéo de Google, présenté dans la source pour la partie voix. Le parcours précis de voix off montré reste à confirmer.
Flora	Organiser des workflows créatifs en reliant des blocs de texte, d’image et de vidéo sur un canevas. Le lien fourni est un lien de parrainage.
Prompt Motion	Explorer des exemples de motion design avec les prompts et les skills associés, pour comprendre comment les animations sont construites.
What Ships	Trouver des vidéos de lancement de produits, des démonstrations et des présentations pour préparer ses références visuelles.

Les erreurs à vérifier avant diffusion

Regardez une fois la vidéo sans son, puis écoutez-la sans regarder l’image. Vous repérerez plus facilement les faiblesses du message et de la narration.

Vérifiez ensuite :

• Les textes : aucune coupure, superposition ou faute.
• Le rythme : chaque idée reste assez longtemps pour être comprise.
• Les interfaces : aucune fonction inventée.
• L’audio : voix intelligible, musique discrète.
• Les faits : chiffres, prix et promesses vérifiés.
• Le format : lecture correcte sur le support de diffusion.
• L’export : début, transitions et dernière image contrôlés dans le MP4.

Si le rendu échoue, transmettez le message d’erreur complet à l’agent. Demandez un diagnostic ciblé avant une réécriture générale du projet.

Est-ce la fin des motion designers ?

Ces outils peuvent accélérer certains travaux : premiers essais, animations typographiques, déclinaisons et présentations simples.

Ils ne permettent pas de déduire qu’une prestation complète se résume à son temps de rendu.

Le baromètre Malt affiche, lors de la vérification, un tarif journalier moyen de 420 € pour les motion designers expérimentés de son échantillon. L’agence 1600 présente notamment des offres de 4 500 € et 6 000 € comprenant plusieurs prestations : script, animation, voix, son et révisions, avec des livrables différents selon la formule. Ces montants éclairent des périmètres de travail ; ils ne prouvent pas l’équivalence avec une génération automatique. Malt

La même prudence s’applique aux comparaisons entre modèles. Un essai isolé dépend du brief, du contexte disponible, des médias, des outils et des retouches. Il ne suffit pas à établir un classement général.

Pour votre premier projet, cherchez surtout une réussite concrète : vingt secondes, trois ou quatre scènes, un message exact et un export vérifié.

Vous pourrez ensuite ajouter une voix, améliorer les transitions et construire un modèle réutilisable. La partie la plus utile du travail restera la même : décider ce que le spectateur doit comprendre, puis choisir les mouvements qui l’y aident.