Claude Motion ou Claude Code : choisir sa chaîne de motion design

Ce qu’il faut retenir

• Claude Motion est un artefact animé par code, éditable dans Claude et exportable en MP4 ; ce n’est pas un modèle de génération vidéo réaliste.
• Claude Code peut lire un projet, modifier plusieurs fichiers et exécuter des commandes, mais il n’est ni le renderer ni l’encodeur.
• HyperFrames est la voie HTML-native à privilégier si le livrable doit rester proche d’une page web et être rendu localement.
• Remotion convient aux compositions React paramétrées ; GSAP orchestre une timeline ; FFmpeg inspecte et transforme les flux média.
• La bibliothèque ne remplace pas un test : conserve les versions, les frames, le rendu et la relecture humaine.

Avant de comparer les piles, regardons-les fonctionner. Le cas suivant est un test exécuté et documenté : il montre où Claude Motion s’arrête, pourquoi Claude Code prend le relais, et comment HyperFrames, GSAP et FFmpeg se répartissent le travail dans un livrable réellement rendu.

Grille de décision : Motion, Code ou pile locale ?

Voie	Livrable	À choisir quand…	Limite à contrôler
Claude Motion	Artifact animé éditable puis MP4	Expliquer un rapport, un graphique ou un walkthrough rapidement	Bêta Team/Enterprise ; pas de footage réaliste ni de dépôt local
Claude Code + HyperFrames	Projet HTML et MP4 rendu localement	Rejouer des frames et conserver une chaîne HTML-native	Node.js, FFmpeg, navigateur headless et versions à vérifier
Remotion	Composition React rendue par frames	Paramétrer des scènes, des données et des variantes	Bundler, packages, navigateur et licence
GSAP	Timeline de tweens et timelines	Orchestrer le mouvement 2D et adresser le temps	Ce n’est pas un encodeur vidéo
FFmpeg	Flux média, filtres, encodage et muxage	Contrôler la sortie après le rendu	Ne conçoit ni le récit ni la direction artistique
Motion Canvas / Rive	Animation vectorielle ou runtime interactif	Synchroniser une voix off ou répondre à des états UI	Ne pas les présenter comme intégrés nativement à Claude Motion

Claude Motion comme prototype, Claude Code comme bascule

Claude Motion est en bêta sur Team et Enterprise. Il transforme un prompt, un rapport, des données ou des images en artifact dont le code anime texte, graphiques, formes et images. L’artifact peut être corrigé dans le chat ou l’éditeur, puis exporté en MP4. Aucune source officielle ne promet un export direct vers HyperFrames, Remotion, GSAP ou FFmpeg : la suite locale est une reconstruction ou une adaptation pilotée par Claude Code.

Critère de bascule : si la demande porte sur un mot, un chiffre, une durée ou une scène isolée, reste dans Motion ; si elle porte sur une arborescence, une fonction temporelle, un rendu reproductible, un batch ou une postproduction, passe à Claude Code et à la pile documentée.

---

Claude Motion : ce qui change dans le workflow

La documentation officielle Claude Motion décrit une fonctionnalité bêta des plans Team et Enterprise. Elle est activée par défaut pour Team ; sur Enterprise, un owner doit l’activer dans les réglages d’organisation et des artifacts. Le produit transforme un brief, un rapport, des données ou des images en artifact Motion : du code anime le texte, les graphiques, les formes et les images, puis l’éditeur permet de demander des changements dans le chat ou directement dans l’éditeur.

Cette nouveauté ne remplace pas la distinction entre animation et vidéo. Claude Motion n’est pas un modèle de text-to-video : il ne génère pas de prises de vue réalistes ni de personnes. Il est adapté à un explainer court, un graphique animé, un walkthrough produit ou une présentation de données. L’animation reste modifiable parce que le contenu, les nombres et le timing sont portés par du code. Le bouton Export permet ensuite de télécharger un MP4 ; l’artifact commence privé et doit être partagé explicitement. La longueur et la complexité consomment davantage de quota.

Le billet officiel Claude en français confirme ce positionnement : Motion est en bêta pour Team et Enterprise, avec des exemples de rapports trimestriels, de graphiques et de parcours d’onboarding. Il présente aussi des outils de création et de montage que l’on peut utiliser après l’export ; cela ne signifie pas que Motion les pilote automatiquement.

Le brief minimal à donner à Claude Motion

La page d’aide recommande de préciser qui regarde, où l’animation sera diffusée et combien de temps elle doit durer, puis de joindre le rapport, les données ou les images utiles. Ajoute ensuite :

• l’idée que l’audience doit retenir ;
• le nombre de scènes ou d’états ;
• le niveau de densité du texte et les unités des données ;
• les contraintes de marque, de lisibilité et d’accessibilité ;
• le critère de sortie : artifact éditable, export MP4, ou les deux.

Amorce rapport vers explainer — documentée, non exécutée : « À partir du rapport joint, crée une animation Motion de 30 secondes pour une réunion de direction. L’audience connaît le contexte mais ne dispose que d’une minute. Fais émerger trois chiffres, anime leur évolution sans exagération et termine par une conclusion actionnable. Demande-moi confirmation si une unité ou une période est ambiguë. »

Amorce graphique vers décision — documentée, non exécutée : « Transforme ce graphique en une animation Motion de 20 secondes pour une slide de comité produit. Commence par la question métier, révèle les séries une par une, garde les valeurs lisibles sur mobile et termine par la décision que le graphique permet de prendre. Utilise uniquement les données jointes. »

Amorce walkthrough d’onboarding — documentée, non exécutée : « Crée un Motion de 45 secondes pour montrer à une nouvelle recrue comment suivre ce workflow. Une scène = une action ; ajoute un repère visuel quand on passe à l’étape suivante ; garde un vocabulaire simple et prévois une fin qui récapitule les trois contrôles à effectuer. »

Quelle voie choisir ?

Voie	Livrable de départ	Contrôle principal	Cas d’usage conseillé
Claude Motion	Artifact animé éditable puis MP4	audience, durée, données, édition et export	explainer, graphique animé, onboarding court
Claude Code + HyperFrames	projet HTML et MP4 rendu localement	versions, navigateur headless, frames et FFmpeg	animation HTML sur mesure et reproductible
Remotion	composition React rendue par frames	durée, fps, inputProps, composition et CLI	bibliothèque de scènes paramétrées
GSAP + FFmpeg	timeline puis finition média	labels, seek(), flux, codecs et ffprobe	orchestration vectorielle et postproduction

Commence par Claude Motion si tu veux un explainer court directement dans Claude ; passe à Claude Code et à la pile locale si tu as besoin d’un dépôt, d’un renderer contrôlé, d’un code réutilisable ou d’un pipeline d’export plus précis. Le post X de @N01ennn est utile pour repérer des dépôts, mais son attribution à Netflix est contredite par la note de contexte X : vérifie chaque repository avant l’installation et ne le présente pas comme une source officielle Anthropic.

Pour comprendre comment Claude s’intègre à un workflow visuel avec des outils externes, consultez notre guide sur Claude et les images avec un connecteur MCP.

---

Stack technique : Claude, HyperFrames, GSAP, Remotion et FFmpeg

Réponse courte : Claude peut piloter ces technologies via Claude Code lorsqu’elles sont installées dans le projet, mais elles ne sont pas des fonctions natives de Claude. Claude écrit, lit et orchestre ; le navigateur, Node.js, les bibliothèques et FFmpeg effectuent le rendu.

Le dépôt officiel HyperFrames documente un framework HTML-native qui transforme HTML, CSS, médias et animations temporelles en MP4 déterministe. Il documente aussi un plugin Claude Code, des skills et un CLI. C’est la voie la plus directe pour ce guide, car elle conserve le point d’entrée HTML du PDF.

Pour comparer plus en détail ces deux chaînes de production, consultez notre guide HyperFrames ou Remotion : choisir le bon modèle de vidéo par code. Il explique les différences entre une composition HTML et un projet React, ainsi que les limites des tests réalisés.

Technologie	Rôle	Choix pratique	Limite
HyperFrames	Prévisualiser et rendre du HTML en vidéo	Défaut pour ce guide	Node.js 22+ et FFmpeg à vérifier
GSAP	Tweens, labels, timelines et seek	Couche de mouvement SVG/DOM	Pas un encodeur MP4 seul
Remotion	Compositions React pilotées par frame	Projet paramétrique ou React	Bundler, versions et licence à contrôler
FFmpeg	Inspection, filtres, transcodage et muxage	Chaîne média et QA	Ne conçoit pas la mise en scène
Three.js, Lottie, CSS/WAAPI	3D, assets vectoriels ou transitions natives	Compléments selon la scène	Compatibilité et reproductibilité à tester

Recommandation d’architecture

Pour sept scènes en 1920×1080 à 24 fps : HyperFrames + HTML/SVG/Canvas + GSAP si une timeline explicite est utile + FFmpeg pour contrôler le master. Remotion devient préférable si le projet doit être une bibliothèque de compositions React paramétrées avec Player, Studio ou rendu CLI. GSAP reste une couche d’animation ; FFmpeg reste une couche média.

Setup HyperFrames documenté

Dans un répertoire de test, vérifie d’abord l’environnement, puis utilise les commandes documentées par la version locale :

node –version ffmpeg -version ffprobe -version claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes npx hyperframes init motion-project npx hyperframes preview npx hyperframes render

Le dépôt propose aussi npx skills add heygen-com/hyperframes. Ces commandes sont documentées, non exécutées dans ce guide. Dans le HTML, garde une timeline en pause, des scènes bornées et un temps adressable ; le renderer doit pouvoir obtenir le même état pour la même frame.

Setup Remotion documenté

La documentation officielle Remotion documente le CLI npx remotion et les commandes suivantes, à adapter aux compositions réellement présentes :

npx remotion compositions npx remotion studio npx remotion render [COMPOSITION_ID] out/video.mp4 npx remotion still [COMPOSITION_ID] out/frame.png npx remotion ffprobe out/video.mp4

La composition doit déclarer largeur, hauteur, durée en frames et fps. Les props doivent être sérialisables et les scènes calculées depuis la frame courante, pas depuis une horloge murale.

Garde-fous

1. Vérifier les versions de Node, FFmpeg, packages et navigateur avant d’installer.
2. Séparer scène, timeline, renderer, audio et postproduction.
3. Éviter Date.now(), random non seedé et timers non contrôlés.
4. Conserver commandes, versions, logs, ffprobe et captures frame 0/milieu/fin.
5. Dire « testé » seulement après conservation et relecture d’un MP4 réellement produit.

Les dix parties d’un prompt de motion design

Partie	Fonction dans le projet	Preuve à demander
Contexte de tâche	Définir le rôle et le livrable	Brief et public
Ton	Fixer le langage visuel et les interdits	Fiche de style
Références et données	Ancrer assets, captures, audio et mesures	Inventaire sourcé
Règles	Fixer le contrat temporel, les limites et les droits	Checklist de contraintes
Exemples	Donner quelques états observables	Frames ou beats annotés
Historique	Transmettre les décisions déjà prises	Journal court
Demande immédiate	Demander une production délimitée	Fichier ou artefact attendu
Gates	Ordonner les étapes et leurs validations	Style guide, shot list, animatic
Sortie	Nommer les fichiers, formats et longueur des notes	Chemins réellement créés
Réponse initiale	Demander d’abord le plan utile	Plan lisible avant le code

Quatre niveaux à choisir avant d’allonger le prompt

1. One-liner : test rapide du moteur et de la direction, sans preuve de concept.
2. Brief de marque : produit, URL, vrais assets, cinq beats et premier contact sheet.
3. Spécification XML : entrées, direction, structure, build, gotchas et démarrage ; le modèle doit demander les informations manquantes avant le code.
4. Brief de direction : logline, références, bible visuelle, beat sheet, gates, critique, audio, formats et livrables.

Le passage décisif est souvent celui du brief de marque à la liste d’états : un état peut être vérifié, corrigé et rejoué. Le PDF donne ici une règle transposable à HyperFrames, GSAP ou Remotion : le prompt doit décrire les états et la preuve de leur rendu, pas seulement une ambiance.

Le render contract à ajouter aux prompts techniques

Pour chaque scène rendue par frame, ajoute un contrat explicite : le temps contrôle l’image ; aucune transition CSS, aucun timer et aucun état transporté entre deux frames ne doit modifier le résultat ; tout bruit doit être seedé ; le renderer, la cadence, le codec et la résolution doivent être nommés. seek(t), render(t) ou la frame courante de Remotion sont des formes possibles de ce principe, pas des noms interchangeables à inventer. Si la technologie choisie expose un autre mécanisme, demande à Claude de le vérifier dans sa documentation.

Ce contrat ne prouve pas encore un MP4. Il rend simplement possible une comparaison frame 0 / milieu / fin, une correction locale et une seconde capture reproductible. Le guide conserve donc le statut documenté, non exécuté pour les commandes HyperFrames, GSAP, Remotion et FFmpeg tant qu’un rendu réel, son journal de versions et sa relecture ffprobe n’ont pas été archivés.

La boucle de critique devient une gate, pas une phrase de politesse

Le protocole du PDF est concret : produire quelques stills par beat, créer une contact sheet, relire le rendu à 360 px, noter séparément hook, lisibilité, mouvement, variété, composition, fidélité de marque et synchronisation sonore, puis corriger les trois défauts les plus importants. La formule « sois un directeur de motion exigeant, pas l’auteur fier de son résultat » peut servir de cadrage, mais elle ne remplace ni les images ni les critères. Trois passes de critique sont une recommandation de workflow du PDF, pas un résultat mesuré dans ce guide.

Pour le son, conserver une seule grille temporelle : beats, downbeats et attaques doivent être écrits dans un fichier ou une structure relue par l’image et le son. Une cible de loudness ou un tempo ne doit pas être présenté comme optimal sans mesure dans le projet réel. Pour les formats, composer la timeline avec une fonction de layout et reconfigurer le texte et l’interface pour 9:16, 1:1 et 16:9 ; ne pas recadrer aveuglément un master 16:9.

---

HyperFrames avancé : passer du prototype HTML au pipeline piloté par Claude

Ce que le PDF ajoute : HyperFrames peut servir de couche de rendu pour transformer une composition HTML/CSS/JavaScript en vidéo déterministe, avec des clips bornés dans le temps, des animations seekables, des contrôles de validation et un pipeline média FFmpeg. La demande utilisateur porte sur l’intégration avancée de ce workflow dans l’article Claude ; elle ne transforme pas automatiquement les affirmations du PDF en capacités garanties.

Vérification actuelle : la documentation officielle confirme le framework HTML-native, le rendu local, le plugin Claude Code, les skills, le routeur /hyperframes, les adaptateurs d’animation, le CLI, le catalogue, frame.md, le SDK, le Player, le rendu AWS Lambda et Google Cloud Run. Le PDF cite aussi des commandes, modules cloud et fonctions audio qui doivent rester liés à la version installée : ils sont donc décrits ici comme documentés à vérifier, disponibles selon la surface choisie ou non corroborés, jamais comme un rendu testé.

1. Installer le bon niveau d’intégration

Avec Claude Code, la voie officielle est le plugin versionné hyperframes@hyperframes et son routeur /hyperframes:hyperframes. Avec des skills autonomes, utilisez le groupe Core ou la mise à jour non interactive npx hyperframes skills update, puis invoquez /hyperframes. Le routeur choisit ensuite le workflow : /motion-graphics, /general-video, /product-launch-video, /remotion-to-hyperframes ou un autre flux installé.

claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes # ou, dans un projet isolé npx hyperframes skills update npx hyperframes init motion-project cd motion-project npx hyperframes preview npx hyperframes lint npx hyperframes check npx hyperframes render

Demandez à Claude de lire et de conserver un BRIEF.md : la documentation officielle indique que l’entretien initial du routeur y enregistre les décisions de production. Le brief devient alors la source de reprise, plutôt qu’une conversation impossible à auditer.

2. Écrire le contrat de composition

Le point avancé n’est pas d’ajouter plus d’effets, mais de rendre chaque état adressable. Le root définit la composition, la durée, le viewport et, si la version locale l’expose, la cadence ; les clips portent leur début, leur durée et leur piste. Le lecteur doit pouvoir demander une image précise sans dépendre d’une horloge murale.

<div id= »main » data-composition-id= »intro » data-start= »0″ data-duration= »10″ data-width= »1920″ data-height= »1080″ data-fps= »24″> <div id= »scene-1″ class= »clip » data-start= »0″ data-duration= »2.5″ data-track-index= »0″> <h1>Un titre lisible</h1> </div> </div>

Avant le rendu, vérifiez que les scènes se bornent sans trou, que les textes restent lisibles, que les assets existent localement ou possèdent un fallback et que la composition se relance depuis un état propre. Une structure plausible ne vaut pas preuve de compatibilité.

3. Rendre GSAP seekable et idempotent

Pour une timeline GSAP, partez d’une timeline en pause, utilisez des labels explicites et enregistrez-la sous l’identifiant de la composition. Le README officiel montre l’usage de window.__timelines. Ce contrat ne dispense pas de tester la version locale : il faut relire les états au début, au milieu, à la fin et après un seek répété.

const tl = gsap.timeline({ paused: true }); tl.from(« #scene-1 h1 », { opacity: 0, y: 40, duration: 0.8 }, 0); tl.addLabel(« scene-1-end », 2.5); window.__timelines = window.__timelines || {}; window.__timelines.intro = tl;

N’utilisez pas Date.now(), des timers non contrôlés ou une valeur aléatoire non seedée dans une scène destinée au rendu déterministe. L’initialisation doit être idempotente : un second chargement ou un second seek ne doit pas ajouter une timeline par-dessus la première.

4. Exploiter le catalogue, frame.md et les surfaces d’application

Avant de recréer un compteur, une transition ou un overlay, interrogez le catalogue officiel avec la skill de registre. Un bloc existant réduit le code spécifique et donne à Claude une implémentation à relire. frame.md sert de traduction du système de design pour la caméra : palette, typographie, rythme, narration et règles de composition. Il ne remplace pas le storyboard ni le contrôle humain.

npx hyperframes add data-chart npx hyperframes add flash-through-white npx hyperframes preview

Pour une application, choisissez la plus petite surface utile : CLI pour valider et rendre, SDK pour modifier le HTML, Player pour lire et chercher une composition, Producer/Engine pour une infrastructure de rendu spécialisée. Le SDK officiel utilise des identifiants stables comme data-hf-id ; le Player n’édite pas le fichier et ne remplace pas le rendu.

5. Ajouter audio et échelle sans confondre disponibilité et test

Le README officiel décrit une couche audio avec voiceover carve, chaînes d’effets, automatisation et bus <hf-audio-group>. Le PDF va plus loin en présentant une chaîne DSP et des commandes cloud ; dans cet article, ces éléments restent à confirmer dans la version locale avant d’être utilisés. Commencez par un rendu local, conservez les fichiers audio et relisez le master avec ffprobe. Ne passez à AWS Lambda ou Cloud Run qu’après un proof of concept local reproductible et un besoin de volume explicite.

6. La gate de qualité HyperFrames

1. Preview : vérifier l’histoire, les faits, le texte, le son et les débordements.
2. Lint : repérer les erreurs de structure ou d’animation selon la version locale.
3. Check : exécuter la composition dans un navigateur headless pour détecter les erreurs qui n’apparaissent pas dans un still : collision, débordement, contraste ou erreur au milieu de la timeline.
4. Render : produire le MP4 après le passage des contrôles.
5. ffprobe : relire durée, cadence, dimensions, flux audio/vidéo et éventuelle troncature.
6. Revue humaine : visionner le master et comparer au brief, au storyboard et aux droits des assets.

7. HyperFrames ou Remotion après le prototype

Choisissez HyperFrames si le matériau de départ est déjà une page, un export design ou une animation web et si vous voulez éviter React et une étape de build. Choisissez Remotion si l’équipe souhaite des compositions React/TypeScript, des props sérialisables et un écosystème React existant. Le guide officiel HyperFrames documente même un workflow de migration Remotion vers HTML ; traitez-le comme un portage à comparer scène par scène, jamais comme une conversion automatique garantie.

---

Bibliothèque de prompts complète : 80 cartes

Les 80 cartes de production, d’intégration technique et de QA sont classées par voie : prompts universels et Claude Motion, puis Claude Code/HTML, HyperFrames/GSAP, Remotion et FFmpeg/QA. Chaque fiche peut être adaptée au brief, à l’arborescence et au moteur choisi. Les champs de validation évitent de confondre une réponse plausible avec une animation réellement contrôlée.

Six amorces Claude Motion avant de coder

Ces prompts d’interface sont documentés, non exécutés. Utilisez-les pour tester le brief dans Claude Motion avant de basculer vers un projet Claude Code.

1. Diagnostiquer la voie

 Voici mon brief, mon audience, le canal et la durée. Dis-moi si Claude Motion suffit ou si je dois préparer un projet Claude Code. Justifie la décision par le niveau de contrôle temporel, le besoin de fichiers et le type d’export. Ne produis pas encore l’animation. 

2. Rapport vers explainer

 À partir du rapport joint, crée un artifact Motion de 30 secondes pour une réunion de direction. Fais émerger trois chiffres, conserve leurs unités et périodes, demande confirmation en cas d’ambiguïté, puis propose une liste de contrôles avant export MP4. 

3. Graphique vers décision

 Transforme le graphique joint en animation Motion de 20 secondes pour un comité produit. Révèle les séries une par une, n’invente aucune donnée et termine par la décision que le graphique permet réellement de prendre. 

4. Walkthrough vers test de bascule

 Crée un Motion silencieux de 45 secondes, une action par scène. À la fin, donne-moi le storyboard, les textes et les timings que je pourrais réutiliser dans HyperFrames ou Remotion si l’artifact ne suffit pas. 

5. Correction locale

 Ralentis uniquement la deuxième scène, remplace le nombre [X] par [Y], ne change ni la palette, ni les autres timings, ni la structure. Liste précisément ce qui a été modifié. 

6. Export et suite

 Vérifie la lisibilité, le contraste, les unités, la dernière frame et la confidentialité de cet artifact. Recommande soit l’export MP4, soit une reconstruction locale avec Claude Code, et explique la preuve qui manque. 

Cadrer le projet et le brief

transformer un brief en contrat de production

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Convertir un brief libre en contrat testable.

Prompt :

Transforme [BRIEF] en contrat de production pour une animation HTML de [DURATION] secondes. Fixe format, fps, scènes, voix off, captions, son, assets, critères de sortie et questions bloquantes. Ne code pas encore.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

créer le squelette du projet

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Initialiser une arborescence propre.

Prompt :

Crée l’arborescence d’un projet motion design HTML avec brief.md, storyboard.md, style-system.md, src/index.html, styles.css, main.js, scene-data.js, audio, captions, qa et exports. Explique le rôle de chaque fichier.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

auditer le brief avant production

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Détecter les ambiguïtés.

Prompt :

Relis [BRIEF] comme un producteur. Liste les informations présentes, manquantes, contradictoires ou non testables. Propose des questions courtes et un contrat corrigé sans inventer de réponse.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

répartir 75 à 90 secondes

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Construire un budget temporel réaliste.

Prompt :

Répartis [DURATION] secondes entre 7 scènes, transitions, voix off et respirations. Donne un tableau dont la somme est exacte et explique où le rythme peut être resserré.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

Storyboard et narration

découper une animation pédagogique en sept scènes

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Obtenir un découpage compatible avec le PDF.

Prompt :

À partir de [BRIEF], propose exactement 7 scènes pour expliquer [CONCEPT]. Pour chaque scène : durée, intention, action visuelle, texte écran, voix off, transition et preuve de compréhension. Respecte 1920×1080 et 24 fps.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

produire les fiches de scène

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Obtenir des fiches prêtes à coder.

Prompt :

À partir du storyboard [STORYBOARD], rédige une fiche par scène avec objectif, durée, entrée, action, sortie, texte, voix off, son, assets et test d’acceptation.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

concevoir une accroche visuelle

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Installer le sujet dès les premières secondes.

Prompt :

Conçois les 0 à 8 premières secondes de [VIDEO]. L’accroche doit être compréhensible sans son, annoncer une tension visuelle et conduire naturellement à la scène 2. Donne 3 variantes.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

construire le monde familier

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Créer un point de départ lisible.

Prompt :

Mets en scène un monde quotidien pour [CONCEPT] avant la rupture. Décris composition, échelle, mouvement, couleurs et un détail qui prépare le problème sans le résoudre.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

visualiser une métaphore

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Transformer une idée abstraite en image.

Prompt :

Traduis [IDEA] en métaphore visuelle animable. Propose 5 options, évalue leur lisibilité, leur coût en HTML et leur risque de cliché, puis recommande une option.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

mettre en scène la rupture

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Rendre le changement perceptible.

Prompt :

Écris la scène de rupture de [STORY]. Décris l’avant, le déclencheur, l’après, le contraste sonore et la transition. Ne change pas de style sans raison narrative.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

rendre un mécanisme compréhensible

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Expliquer un système sans surcharge.

Prompt :

Explique [MECHANISM] par une animation en trois niveaux : vue d’ensemble, zoom sur le mécanisme, conséquence. Limite le texte écran et indique ce que la voix off peut prendre en charge.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

préparer la découverte

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Créer une montée vers le point clé.

Prompt :

Construis la scène de découverte de [DISCOVERY] avec suspense visuel, révélation progressive et point d’arrêt. Donne les timecodes et les éléments que le spectateur doit avoir compris.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

montrer la conséquence

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Relier action et résultat.

Prompt :

Mets en scène la conséquence de [ACTION] en restant cohérent avec [STYLE]. Utilise composition, délai, répétition ou changement d’échelle plutôt qu’un texte explicatif long.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

fermer la boucle avec le récapitulatif

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Conclure sans ajouter une nouvelle idée.

Prompt :

Crée la dernière scène de [VIDEO] : récapitulatif visuel, phrase de conclusion, retour au motif initial et transition finale. Vérifie qu’elle ferme la boucle et respecte la durée restante.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

Direction artistique et cohérence

Avant de faire bouger un graphique, il faut décider ce que ses couleurs, ses formes et ses échelles doivent faire comprendre. Notre guide de la charte de marque à l’artifact de dataviz avec Claude Design explore cette étape, avec un cas réalisé dans Claude Code : onze films déclinés en 55 affiches. Une manière de construire le langage visuel avant de travailler son rythme, sans confondre cohérence de marque et exactitude des données.

verrouiller une identité visuelle cohérente

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Créer une bible de style exploitable.

Prompt :

Déduis de [BRIEF] une bible visuelle : palette, matière, silhouette, typographie, contraste, profondeur, caméra, mouvement et interdits. Donne des tokens réutilisables dans toutes les scènes.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

maintenir un personnage et une palette sur sept scènes

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Éviter les dérives visuelles.

Prompt :

À partir de [STYLE], définis une fiche de continuité pour le personnage, les proportions, les couleurs, les accessoires et les règles de caméra sur 7 scènes. Ajoute une checklist de comparaison.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

décliner une même animation en styles contrôlés

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Comparer des directions artistiques.

Prompt :

Décline [SCENE] en trois styles : [STYLE_A], [STYLE_B], [STYLE_C]. Conserve le timing et le message, change seulement matière, palette, caméra et mouvement. Présente les compromis.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

formaliser les tokens de palette

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Rendre les couleurs réutilisables.

Prompt :

Convertis [PALETTE] en tokens CSS nommés avec usages, contrastes attendus et exceptions. Ajoute un mini protocole pour vérifier qu’une scène n’introduit pas une couleur non autorisée.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

hiérarchiser la typographie

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Rendre le texte lisible en mouvement.

Prompt :

À partir de [TEXTES], définis une hiérarchie typographique pour 1920×1080 : niveaux, taille relative, longueur maximale, placement, animation d’entrée et règle de sortie.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

vérifier le responsive sans casser le 16:9

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Préserver la composition sur petits écrans.

Prompt :

Teste mentalement et techniquement [SCENE] en 1920×1080, 1366×768 et mobile. Identifie ce qui doit rester fixe, ce qui peut recadrer et ce qui doit être masqué.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

Mouvement, rythme et transitions

traduire l’intention en vocabulaire de mouvement

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Donner un langage précis au motion design.

Prompt :

Pour [INTENTION], choisis un vocabulaire de mouvement : amplitude, vitesse, inertie, répétition, anticipation, overshoot et arrêt. Relie chaque choix à une émotion et indique les usages à éviter.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

construire une grille de beats

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Planifier les points forts.

Prompt :

Transforme [SCRIPT] en grille de beats avec timecode, information, action, accent sonore, changement de plan et test de compréhension. Respecte exactement [DURATION].

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

régler le rythme sans inventer d’easing

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Ajuster le mouvement de façon explicite.

Prompt :

Audite les timings de [SCENE]. Propose des durées et courbes seulement si elles existent dans le moteur choisi. Sépare valeurs documentées, valeurs testées et recommandations.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

dessiner les transitions

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Relier les scènes sans collage arbitraire.

Prompt :

Pour les scènes [SCENES], propose 5 transitions motivées par le contenu : match cut, wipe, morph, caméra ou continuité d’objet. Pour chacune, indique coût, risque et condition de lisibilité.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

contrôler le boil de stop-motion

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Stabiliser une matière image par image.

Prompt :

Conçois un boil contrôlé pour [STYLE] : amplitude, fréquence, éléments autorisés à bouger et éléments verrouillés. Ajoute un test pour éviter le tremblement numérique illisible.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

construire le pipeline papier découpé

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Simuler une animation tactile maîtrisée.

Prompt :

Décris une scène papier découpé pour [CONCEPT] : couches, ombres, articulations, déplacements, texture et caméra. Donne une version HTML réalisable et une liste de limites.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

contrôler le personnage corail

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Conserver une mascotte cohérente.

Prompt :

Crée une fiche de continuité pour un personnage corail : silhouette, visage, proportions, poses, expressions, palette et interactions. Applique-la à [SCENES] et liste les écarts à corriger.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

HTML, Canvas, SVG et Three.js

générer une page HTML contrôlable

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Construire une base inspectable.

Prompt :

Crée une page HTML/CSS/JS autonome pour [SCENE]. Expose les contrôles durée, pause, reset, frame et seed. Sépare structure, style et logique et indique où remplacer les assets.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

choisir Canvas ou SVG/GSAP

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Décider le moteur avec critères.

Prompt :

Compare Canvas 2D, SVG/GSAP et Three.js pour [SCENE] selon lisibilité, contrôle temporel, texte, export, performance et maintenance. Recommande un seul choix et justifie-le sans inventer de capacité.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

construire une scène Canvas avec une fonction temporelle

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Obtenir une animation déterministe.

Prompt :

Écris [SCENE] en Canvas 2D avec une fonction render(t), un temps normalisé, un reset et une boucle sans dérive. Ajoute les contrôles de lecture et commente les paramètres modifiables.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

créer une scène SVG/GSAP qui boucle proprement

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Obtenir une boucle éditable.

Prompt :

Construis [SCENE] en SVG et GSAP avec timeline nommée, labels, durée explicite et reverse/reset. N’utilise que les APIs documentées et signale toute dépendance externe.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

prototyper une scène Three.js sans perdre l’idée

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Cadrer une 3D minimale.

Prompt :

Propose un prototype Three.js pour [SCENE] avec caméra, lumière, objets, animation temporelle et fallback visuel. Commence par la version la plus petite qui prouve l’intention.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

réduire le coût d’une scène Canvas

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Améliorer la fluidité sans changer l’idée.

Prompt :

Profile [CANVAS_SCENE] et propose des optimisations mesurables : dessin, particules, images, calculs, resize et boucle. Ne retire un effet que si tu expliques le compromis visuel.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

structurer une scène SVG

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Obtenir un SVG maintenable.

Prompt :

Organise [SVG_SCENE] en groupes nommés et attributs cohérents. Décris les éléments animables, les états initiaux et la timeline. Évite les chemins impossibles à relire.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

cadrer une scène Three.js minimale

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Éviter la 3D décorative.

Prompt :

Réduis [3D_IDEA] à une scène Three.js minimale qui prouve la profondeur, la lumière ou la caméra. Liste ce qui est volontairement hors périmètre et le fallback 2D.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

Voix, son, captions et accessibilité

intégrer voix off, captions et rythme

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Synchroniser les couches éditoriales.

Prompt :

À partir de [SCRIPT] et [DURATION], produis un tableau timecode avec voix off, texte écran, captions, action visuelle et respiration. Signale les lignes trop longues ou trop rapides.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

synchroniser la voix off et les captions

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Éviter le décalage de lecture.

Prompt :

Aligne [VOICEOVER] et [CAPTIONS] sur [TIMELINE]. Découpe les phrases, propose des timecodes, vérifie la lisibilité et indique les passages à réenregistrer plutôt qu’à accélérer.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

écrire un plan sonore par scène

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Préparer le sound design.

Prompt :

Pour les 7 scènes de [VIDEO], écris un plan sonore : voix, ambiance, accent, transition, silence et niveau relatif. N’invente pas de fichier audio et sépare intention et asset disponible.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

placer les accents de sound design

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Soutenir les moments clés.

Prompt :

Repère les 5 accents sonores les plus utiles dans [TIMELINE]. Pour chacun, donne timecode, événement visuel, durée, intention et condition de retrait si le son surcharge la voix.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

rendre la page HTML accessible

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Prévoir une consultation robuste.

Prompt :

Audite [HTML] pour clavier, pause, reset, texte alternatif, contraste, réduction des mouvements et structure sémantique. Donne les corrections prioritaires sans dégrader la composition.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

Assets, outils et organisation du projet

inventorier les assets

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Prévenir les références manquantes.

Prompt :

À partir de [PROJECT], inventorie chaque asset : nom, type, source, licence, dimensions, scène, statut et fallback. Marque explicitement les assets à créer, à vérifier et disponibles.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

auditer les outils MCP du projet

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Éviter les suppositions d’environnement.

Prompt :

Inspecte l’environnement du projet [PROJECT] et liste uniquement les outils, versions et capacités observés. Sépare disponible, annoncé, testé et recommandé. Ne fabrique aucun nom d’outil.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

planifier une tâche multi-fichiers

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Ordonner une modification sûre.

Prompt :

Planifie l’implémentation de [CHANGE] sur plusieurs fichiers. Pour chaque étape, indique dépendances, preuve attendue, risque de régression et possibilité de retour arrière.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

refactorer par petites passes

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Améliorer sans casser le rendu.

Prompt :

Découpe le refactoring de [CODEBASE] en passes courtes. Chaque passe doit laisser le rendu fonctionnel, avoir un test et limiter les fichiers touchés. Donne l’ordre recommandé.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

conserver la provenance et la reproductibilité

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Documenter ce qui a réellement servi.

Prompt :

Pour [PROJECT], crée un registre de provenance : sources, version du modèle, prompt, fichiers, tests, captures, limites et date. Distingue prompt documenté de prompt exécuté.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

Capture, tests et livraison

auditer le rendu avant capture vidéo

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Repérer les défauts de production.

Prompt :

Audite le projet [PROJECT] avant capture : erreurs console, débordements, fonts, contraste, pause, reset, boucle, synchronisation, format 16:9 et stabilité. Donne une liste bloquante puis une liste de finition.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

préparer une capture et ses preuves

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Documenter un cas réellement vérifiable.

Prompt :

Prépare la capture de [PROJECT] : état initial, scénario de test, contrôles utilisés, timecodes, captures attendues, fichiers de preuve et limites. Étiquette clairement ce qui est testé et documenté.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

construire un banc de test temporel

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Tester les états clés d’une animation.

Prompt :

Crée un banc de test pour [SCENE] avec t=0, début, milieu, fin, reset, pause et boucle. Pour chaque état, définis une assertion visuelle et une capture de preuve.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

préparer le protocole de capture

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Obtenir une vidéo reproductible.

Prompt :

Écris le protocole de capture de [PROJECT] : navigateur, viewport, fps cible, durée, état initial, absence de curseur, audio, nommage et contrôle après export. Signale les paramètres non vérifiés.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

effectuer la checklist de livraison

Modèle / mode : Claude Opus 5.5 via Claude Code ; pensée adaptative active, niveau d’effort à régler et mesurer selon l’environnement ; exécution dans le projet si nécessaire. Objectif : Décider si le guide est livrable.

Prompt :

Exécute une checklist de livraison pour [PROJECT] : contenu, code, timing, captions, audio, responsive, accessibilité, sources, preuves, embeds et brouillon WordPress. Retourne OK, à corriger ou bloqué pour chaque ligne.

Variables : BRIEF, STYLE, SCENE, DURATION, TIMELINE, PROJECT, ASSETS — à remplacer selon le cas.

Intégration technique et choix du renderer

auditer la compatibilité du stack

Modèle / mode : Claude Opus 5.5 via Claude Code, audit Objectif : séparer capacités officielles et disponibilité locale.

Prompt :

Inspecte [PROJET] sans modifier ni installer. Relève Node, npm/pnpm/bun, FFmpeg, ffprobe, Chrome/Chromium, packages et scripts. Consulte les docs officielles. Compare HyperFrames + HTML, Remotion + React et navigateur + GSAP + FFmpeg. Pour chaque voie, donne prérequis, commande de vérification, risque et décision. Réponds inconnu si une version ou licence n’est pas vérifiable.

Variables : projet, versions, contraintes de licence. Pourquoi : l’audit évite de confondre une intégration annoncée avec un outil installé. Limites : il ne prouve pas qu’un rendu complet fonctionnera.

installer HyperFrames dans un projet isolé

Modèle / mode : Claude Opus 5.5 via Claude Code, setup contrôlé Objectif : préparer un proof of concept sans toucher au dépôt principal.

Prompt :

Dans [RÉPERTOIRE_TEST], lis l’état Git et les versions. Propose les commandes officielles du plugin Claude Code et du CLI HyperFrames, puis attends confirmation avant installation. Crée ensuite une scène de 2 secondes, vérifie l’aide locale et documente chaque fichier. Ne publie rien et classe chaque étape annoncée, disponible, exécutée ou en échec.

Variables : répertoire, branche, durée. Pourquoi : le plugin est documenté, mais l’installation locale doit être prouvée. Limites : système, version et droits peuvent différer.

porter les sept scènes HTML vers HyperFrames

Modèle / mode : Claude Opus 5.5 via Claude Code, refactorisation Objectif : rendre le prototype adressable dans le temps.

Prompt :

À partir de [FICHIERS_HTML], porte le prototype vers la structure HyperFrames documentée. Conserve les 7 scènes, 1920×1080 et la palette. Pour chaque scène, ajoute début, fin, id et état déterministe. Sépare textes, captions et médias. Donne le diff, les commandes preview/render détectées et une checklist frame 0/milieu/fin.

Variables : fichiers, timecodes, assets, version. Pourquoi : le portage protège l’architecture éditoriale avant les effets. Limites : il ne garantit ni parité visuelle ni export valide.

construire une timeline GSAP recherchable

Modèle / mode : Claude Opus 5.5 via Claude Code, animation SVG/DOM Objectif : contrôler lecture, pause, reset et recherche temporelle.

Prompt :

Dans [SCÈNE], construis une timeline GSAP en pause avec labels pour 7 scènes. Utilise seulement les APIs de la version installée et documentée. Expose seekScene(id) et seekSeconds(t). Supprime Date.now(), random et timers non contrôlés. Ajoute un panneau QA avec scène, temps, durée et pause.

Variables : fichier, durée, labels, easing. Pourquoi : GSAP est ici une timeline contrôlable, pas un encodeur. Limites : renderer et version doivent encore être vérifiés.

adapter GSAP au renderer HyperFrames

Modèle / mode : Claude Opus 5.5 via Claude Code, intégration Objectif : relier une timeline GSAP au protocole temporel HyperFrames.

Prompt :

Lis les exemples HyperFrames de [PROJET]. Adapte la timeline GSAP : pause initiale, référence attendue par le renderer, initialisation idempotente et état stable après seek. N’invente aucun hook. Si l’intégration n’est pas documentée pour la version locale, arrête-toi et propose un test isolé.

Variables : projet, version, entrée. Pourquoi : un exemple de README n’est pas une API universelle. Limites : un hook absent bloque l’intégration.

préparer un rendu HyperFrames et son contrôle FFmpeg

Modèle / mode : Claude Opus 5.5 via Claude Code, rendu et QA média Objectif : produire un MP4 puis relire ses propriétés.

Prompt :

Prépare le rendu de [PROJET_HYPERFRAMES] selon la version locale. Relève Node, FFmpeg, ffprobe, dimensions, fps et durée attendus. Après rendu, vérifie durée, cadence, flux, codec, résolution et troncature. Compare au brief. En cas d’échec, conserve le log et n’essaie pas une variante non documentée en silence.

Variables : projet, sortie, valeurs attendues. Pourquoi : FFmpeg sert à la QA média, pas à inventer l’intention visuelle. Limites : aucune propriété n’est attestée sans fichier relu.

choisir Remotion plutôt que HyperFrames

Modèle / mode : Claude Opus 5.5 via Claude Code, décision d’architecture Objectif : choisir à partir des besoins.

Prompt :

Compare HyperFrames et Remotion pour [PROJET] : durée, scènes, assets, captions, paramètres et destination. Relis les docs officielles. Matrice HTML, React, contrôle par frame, preview, rendu local, cloud, FFmpeg, composants, complexité, licence et reproductibilité. Choisis une voie et propose un proof of concept de moins de 30 secondes. Ne code pas avant la décision.

Variables : contraintes, budget, environnement. Pourquoi : le comparatif devient une décision traçable. Limites : versions, budget et licence peuvent modifier le choix.

créer une composition Remotion frame-first

Modèle / mode : Claude Opus 5.5 via Claude Code, React vidéo Objectif : calculer chaque scène depuis la frame courante.

Prompt :

Dans Remotion, crée [ID] en 1920×1080, 24 fps et [DURÉE_FRAMES]. Utilise la frame courante comme source unique du temps. Découpe 7 séquences, ajoute captions, audio et palette centralisée. Les props sont sérialisables. Affiche frame, seconde, scène et durée. Aucun Date.now() ni random non seedé.

Variables : id, durée, props, audio. Pourquoi : la composition suit le modèle frame-first de Remotion. Limites : assets et composants réels peuvent ajouter des contraintes.

rendre et inspecter une composition Remotion

Modèle / mode : Claude Opus 5.5 via Claude Code, rendu local Objectif : utiliser le CLI sans supposer id ou codec.

Prompt :

Dans [PROJET_REMOTION], liste d’abord les compositions disponibles avec la commande officielle. Prépare ensuite le rendu de [COMPOSITION_ID] vers [SORTIE]. Vérifie navigateur, props, 1920×1080, 24 fps et durée. Relis la sortie avec Remotion ou ffprobe. N’envoie rien vers le cloud sans demande explicite.

Variables : projet, composition, sortie, props. Pourquoi : le CLI doit partir d’une composition réelle. Limites : aucun rendu n’est attesté ici.

évaluer une migration Remotion vers HyperFrames

Modèle / mode : Claude Opus 5.5 via Claude Code, migration prudente Objectif : analyser les écarts sans promettre une conversion.

Prompt :

Analyse [PROJET_REMOTION] et le workflow de migration Remotion vers HyperFrames documenté officiellement. Liste composants React, props, séquences, assets et APIs sans équivalent HTML. Propose une migration scène par scène, critères visuels, risques de timing et plan de retour. N’efface ni ne modifie la source.

Variables : projet, version, scènes prioritaires. Pourquoi : la compatibilité doit être prouvée composant par composant. Limites : timing et assets peuvent changer lors d’un portage.

utiliser FFmpeg pour la postproduction

Modèle / mode : Claude Opus 5.5 via Claude Code, postproduction contrôlée Objectif : muxer ou filtrer selon les flux réels.

Prompt :

Inspecte [VIDEO] et [AUDIO] avec ffprobe. À partir des flux réels et des docs FFmpeg, propose une commande pour [OBJECTIF] : muxer, fps, resize, coupe ou filtre. Explique l’ordre des options, les flux et le risque de réencodage. Après validation, relis la sortie et compare durée, résolution, fps, codec, audio et métadonnées.

Variables : entrée, audio, objectif, sortie. Pourquoi : la commande dépend des flux réellement présents. Limites : codecs et build FFmpeg peuvent changer la syntaxe ou le résultat.

auditer la reproductibilité finale

Modèle / mode : Claude Opus 5.5 via Claude Code, QA de livraison Objectif : décider si un second opérateur peut reprendre le pipeline.

Prompt :

Audite [PROJET] sans publier ni supprimer. Relis brief, docs officielles, versions, lockfile, commandes, 7 timecodes, frame 0, frames intermédiaires, dernière frame, captions, audio, droits, rendu et ffprobe. Classe chaque point vérifié, documenté non exécuté, exécuté avec preuve, à corriger ou impossible. Conclus prêt pour revue humaine ou non.

Variables : projet, versions, chemin du journal. Pourquoi : l’audit relie promesse de l’outil et preuve de livraison.

HyperFrames avancé

initialiser un projet HyperFrames avec un brief reprenable

Modèle / mode : Claude Code avec plugin HyperFrames ou skills autonomes, setup de projet. Objectif : établir un socle isolé et traçable. Prompt :

Dans [DOSSIER_TEST], vérifie l’état Git, Node.js, FFmpeg et Chromium. Utilise la voie officielle disponible pour installer ou mettre à jour les skills HyperFrames, puis initialise un projet. Crée BRIEF.md avec durée, viewport, fps, scènes, assets, narration, captions, droits et critères d’arrêt. Lance preview, mais n’installe rien et ne publie rien sans confirmation explicite. Liste séparément annoncé, disponible, exécuté et à vérifier.

Variables : dossier, version, durée, ratio, contraintes. Pourquoi : le brief et le preview rendent la première itération observable. Limites : la présence de la skill ne prouve pas la disponibilité des dépendances locales.

convertir sept scènes en contrat de composition

Modèle / mode : Claude Code avec /hyperframes, génération HTML. Objectif : rendre la timeline lisible et adressable.

Prompt :

À partir de [BRIEF] et [STORYBOARD], écris le root HyperFrames et 7 clips bornés. Pour chaque clip, renseigne id, data-start, data-duration et data-track-index ; conserve 1920×1080, [FPS] et la durée totale. Refuse toute scène sans entrée, sortie, texte, asset, transition et assertion de QA. Ne choisis pas de paramètre absent de la documentation de la version installée.

Variables : brief, storyboard, timecodes, fps, assets. Pourquoi : le contrat sépare le temps des éléments visuels et facilite le contrôle image par image. Limites : un contrat HTML valide ne garantit pas la qualité artistique.

construire une timeline GSAP seek-safe

Modèle / mode : Claude Code, HyperFrames + GSAP, animation DOM/SVG. Objectif : permettre pause, seek, reset et relecture identique.

Prompt :

Dans [COMPOSITION], crée une timeline GSAP paused avec labels par scène et un enregistrement sous window.__timelines.[COMPOSITION_ID]. Initialise les états visuels avant la timeline, rends l’initialisation idempotente et teste t=0, milieu, fin, pause, reset et seek répété. Interdis Date.now(), timers non contrôlés et random non seedé. Utilise seulement les APIs de la version installée.

Variables : composition, id, labels, durée, easing, version GSAP. Pourquoi : le README officiel fournit le pattern de timeline enregistrée, tandis que le test local prouve l’intégration réelle. Limites : un exemple officiel ne certifie pas chaque combinaison de plugins GSAP.

auditer un runtime d’animation avant de le brancher

Modèle / mode : Claude Code, audit technique HyperFrames. Objectif : choisir entre GSAP, CSS, WAAPI, Lottie, Three.js, Anime.js, TypeGPU ou un autre runtime documenté.

Prompt :

Pour [SCENE], compare uniquement les runtimes listés par la documentation HyperFrames actuelle. Pour chacun : mode de seek, état initial, dépendances, compatibilité avec le viewport, risques de nondéterminisme, fallback et test minimal. Ne transforme pas une mention de compatibilité en promesse de parité. Recommande un runtime et explique ce qui doit être mesuré.

Variables : scène, runtime, asset, navigateur, version. Pourquoi : l’adaptateur est un choix d’architecture, pas un simple import de bibliothèque. Limites : les shaders, plugins et assets peuvent ajouter des contraintes propres au projet.

utiliser le catalogue avant de recoder un effet

Modèle / mode : Claude Code avec la skill de registre HyperFrames. Objectif : réutiliser un bloc vérifiable avant d’écrire un composant spécifique.

Prompt :

Pour [EFFET], cherche d’abord un bloc officiel ou documenté dans le catalogue HyperFrames. Compare nom, entrée, sortie, paramètres, licence, dépendances et compatibilité avec [COMPOSITION]. Si un bloc convient, propose la commande hyperframes add et son intégration. Sinon, justifie pourquoi un composant local est nécessaire. Ne fabrique pas de nom de bloc.

Variables : effet, composition, version, contraintes de licence. Pourquoi : le registre peut réduire la surface de code et les erreurs de réimplémentation. Limites : un bloc catalogue doit encore passer les contrôles du projet.

transformer une identité de marque en frame.md

Modèle / mode : Claude Code avec /hyperframes-creative, direction visuelle. Objectif : fournir à l’agent une règle de composition pour la caméra.

Prompt :

À partir de [DESIGN_MD], [BRIEF] et [STORYBOARD], rédige un frame.md orienté vidéo : palette, typographie, contraste, grille, échelle, profondeur, rythme, narration visuelle, transitions permises et interdits. Sépare tokens obligatoires, choix libres et points à valider. Ne modifie pas les assets et n’invente pas une validation de marque.

Variables : design system, palette, type, storyboard. Pourquoi : frame.md traduit des tokens web en règles de cadrage sans figer toute la mise en scène.

modifier une composition par identifiants stables

Modèle / mode : Claude Code avec @hyperframes/sdk, édition de source. Objectif : changer un élément sans réécrire tout le HTML.

Prompt :

Ouvre [HTML] avec l’API SDK officielle. Repère l’élément data-hf-id="[ID]", modifie seulement son texte ou sa propriété demandée, sérialise le résultat et écris un patch relisible. Compare avant/après, vérifie que les clips, timelines, assets et compositions de fin sont inchangés. N’utilise pas le SDK pour rendre ou publier.

Variables : HTML, data-hf-id, propriété, patch. Pourquoi : l’identifiant stable permet une édition ciblée et réversible. Limites : le SDK et ses adaptateurs doivent être présents dans le projet.

intégrer le Player comme surface de revue

Modèle / mode : Claude Code, @hyperframes/player, prévisualisation web. Objectif : proposer une revue seekable sans confondre lecture et rendu.

Prompt :

Ajoute une page de revue qui charge [COMPOSITION] dans hyperframes-player. Expose pause, lecture, seek, vitesse et événements de timeline si l’API installée les documente. Ajoute une fiche de QA pour frame 0, début/milieu/fin, captions, contraste et son. N’édite pas la composition depuis le Player et n’annonce pas un MP4 avant le rendu CLI.

Variables : composition, URL, contrôles, événements. Pourquoi : le Player est une surface de lecture et de seek, distincte du SDK et du renderer. Limites : la revue dans le navigateur ne prouve pas le résultat encodé.

intégrer le voiceover carve et le sous-mixage avec prudence

Modèle / mode : Claude Code avec /hyperframes-audio, audio documenté. Objectif : préserver la voix sans inventer une chaîne DSP.

Prompt :

Inspecte la version locale et les skills HyperFrames audio avant toute modification. Si voiceover carve et hf-audio-group sont disponibles et documentés, propose un bus voix, un bus musique, une enveloppe d’automation et un test A/B sans écraser les fichiers sources. Sinon, signale la limite et prépare seulement le plan de mixage. Après rendu, relis les flux et le niveau perçu ; ne qualifie pas le résultat sans écoute humaine.

Variables : voix, musique, groupes, automation, version.

fermer le pipeline par une QA déterministe

Modèle / mode : Claude Code, HyperFrames CLI + FFmpeg/ffprobe, QA de livraison. Objectif : produire un dossier de preuve sans publication.

Prompt :

Pour [PROJECT], exécute seulement les commandes locales documentées : lint, check, preview puis render. Conserve versions, logs, commandes, captures frame 0/milieu/fin et sortie MP4. Relis le master avec ffprobe : durée, résolution, fps, codecs, flux et troncature. Compare chaque valeur au BRIEF.md. Classe chaque point vérifié, exécuté avec preuve, documenté non exécuté ou bloqué. N’utilise aucun cloud et ne publie rien.

Motion Video Kit : critique et livraison

écrire un brief vérité avant le storyboard

Objectif : empêcher les promesses inventées et rendre le CTA mesurable.

Prompt :

À partir de [BRIEF], écris BRIEF.md pour un film motion de [DURATION] secondes. Sépare acheteur, problème, bénéfice prouvé, CTA, assets disponibles, durée, format, contraintes de marque et affirmations interdites. Ajoute une colonne “preuve attendue” pour chaque affirmation. Si une donnée manque, écris “à confirmer” et ne l’invente pas.

storyboarder par mécanismes et travail business

Objectif : éviter une suite d’effets sans fonction narrative.

Prompt :

À partir de BRIEF.md, propose un storyboard timecodé. Pour chaque beat : ce que le spectateur voit, le travail business de la scène, le texte lisible sans son, l’action visuelle, la transition motivée, l’asset, la preuve attendue et le risque. Choisis 3 à 6 mécanismes de motion dans la liste documentée du dépôt et explique pourquoi chacun sert le message.

lancer une critique indépendante de composant

Objectif : juger une scène sur son rendu réel plutôt que sur le raisonnement du builder.

Prompt :

Tu es le critique indépendant du composant [COMPONENT]. Lis BRIEF.md et [REFERENCE]. Examine les frames [FRAMES] et la courte preuve [PROOF]. Ne lis pas mes intentions : juge les pixels. Retourne KEEP, REVISE ou REJECT, puis classe les défauts par impact business, lisibilité, timing, continuité, contraste et déterminisme. Donne au maximum trois corrections prioritaires et une régression à vérifier.

exécuter un Gauntlet de film complet

Objectif : corriger la plus grande faiblesse en plusieurs passes traçables.

Prompt :

Pour [MASTER_MP4], exécute une revue Gauntlet en respectant le brief et les références. Analyse frames régulières et zones denses autour des transitions, puis mesure les défauts de timing, frames vides, collisions de texte, CTA, continuité et lisibilité sur mute. Relie chaque finding à un timecode et à une correction. Mets à jour un ledger round → artefact → findings → changement → résultat mesuré. Ne propose pas une refonte générale si une correction locale suffit.

garantir une scène Three.js déterministe

Objectif : rendre le composant seekable et reproductible.

Prompt :

Construis [SCENE_3D] avec createScene(canvas, opts), pose(t), render(t), anchors(t) et dispose(). Construis une seule fois, charge les textures avant capture, rends frame 0 explicitement et n’utilise ni RAF, ni Date.now(), ni timer, ni physique dépendante de l’historique, ni random non seedé. Teste le même t après deux ordres de seek et compare les pixels. Ajoute un fallback HTML/SVG si la 3D n’explique pas une relation spatiale.

mesurer frozen time et loudness

Objectif : remplacer les impressions par des mesures relisibles.

Prompt :

Pour exports/master.mp4, lance les scripts frozen-time.sh et loudness.sh du dépôt avec les seuils documentés. Résume les passages quasi figés, LUFS intégré, LRA, true peak et niveaux short-term. Compare aux objectifs du BRIEF.md et sépare mesure, interprétation et recommandation. Indique explicitement si quelqu’un a écouté le master.

construire une preuve HyperFrames dans le component lab

Objectif : isoler une scène avant son intégration au film.

Prompt :

À partir de [COMPONENT], utilise le template component-lab du dépôt. Vérifie que window.__hf.buildReady.lab et window.__timelines.lab sont prêts, puis capture les temps 0, 1.2 et 2.4 et un proof.mp4 selon les commandes présentes dans le template. Compare frame 0, milieu et fin au storyboard. Si une commande, un hook ou un flag n’existe pas dans l’aide locale, arrête et signale l’écart au lieu de l’inventer.

décider la livraison sans confondre “pas de bug” et “bon film”

Objectif : fermer le pipeline avec une décision explicite.

Prompt :

Audite [MASTER_MP4] et son dossier de preuves. Vérifie vérité des claims, compréhension sur mute, CTA, rythme, frame 0, transitions, texte, contraste, couleur de marque, déterminisme, audio, droits des assets, durée, résolution, fps et absence de frame vide. Retourne SHIP ou ONE MORE PASS. Si ONE MORE PASS, donne les trois défauts les plus importants et la preuve attendue après correction. Ne marque jamais “testé” sans artefact relu.

Pour mieux formuler les mouvements, les transitions et les intentions de caméra, utilisez notre dictionnaire des mouvements de caméra pour les prompts vidéo IA.

---

Pour aller plus loin

Un workflow de motion design devient réellement réutilisable lorsqu’il transforme un brief, des sources et des contrôles qualité en méthode transmissible. La formation Claude Cowork & Skills : construire des assistants IA métier vous apprend à structurer ces assistants et à les intégrer dans vos processus créatifs.

---

Sources

• Anthropic — Claude Code / Anthropic — modèles Claude
• MDN — Canvas API / MDN — SVG
• HyperFrames — dépôt officiel HeyGen / HyperFrames — quickstart officiel / HyperFrames — guide officiel de prompting / HyperFrames — documentation développeur / HyperFrames — comparaison officielle avec Remotion
• GSAP Timeline
• Remotion
• FFmpeg
• Web Animations API — MDN