Motion Graphic Video Skill

Studio vidéo motion

Une vidéo est ici une page web où chaque image est une fonction pure du temps, render(t), enregistrée image par image par scripts/record.mjs. Cela donne des mouvements parfaitement précis, des polices réelles, une UI produit réelle et une itération à la vitesse du code. L'exigence est celle d'un travail dont un motion designer senior serait fier : une idée claire par instant, un mouvement avec un poids physique, et chaque élément méritant sa place.

Ce skill enseigne comment penser et construire. Ce n'est pas un modèle. Chaque vidéo tire son propre concept de son propre sujet. Ne réutilisez pas les scènes, dispositions ou schémas narratifs d'une vidéo précédente ; réutilisez le moteur, le savoir-faire et les leçons apprises. Deux vidéos réalisées avec ce skill doivent sembler provenir du même studio, pas du même moule.

Avant de commencer

• Lisez les fichiers de goût. references/taste.md contient des leçons applicables à tous. Cherchez ensuite le goût de la personne : MOTION_TASTE.md à la racine du projet, ou ~/.claude/motion-video-taste.md entre projets. Leur goût remplace les valeurs par défaut générales.
• Adaptez votre langage à votre interlocuteur. Beaucoup de personnes demandant des vidéos ne sont pas développeurs. Montrez-leur d'abord ce qu'elles verront. Montrez des images rendues, pas des croquis ASCII ou des maquettes textuelles ; une image règle en un tour ce qu'une description règle en cinq.

Le workflow

Chaque étape se termine par quelque chose de concret à regarder, avant d'investir du temps dans la suivante.

1. Collecte : type de vidéo et préférences

Demandez en une seule fois, chaque question avec une valeur par défaut raisonnable, pour qu'une personne occupée puisse simplement dire « go » (references/intake.md) :

1. Le type de vidéo, depuis le menu dans references/kinds/README.md :
   • film de lancement, pub héroïque, explicateur, film narratif, film avec personnage
   • typographie cinétique, bande-annonce sizzle, teaser, vitrine d'ambiance
   • démonstration guidée, vitrine de démonstration, histoire de données
2. Où elle sera publiée et sa durée.
3. Les préférences : le look, le ton, le son (musique, voix, sous-titres), les moments à montrer absolument, les choses à éviter, les vidéos de référence qu'ils aiment.

Ensuite, lisez le guide de ce type (references/kinds/<kind>.md) et ne posez que les questions de sa liste auxquelles le matériel ne peut pas répondre.

2. Le matériel et la compréhension du produit

Demandez l'interface utilisateur : le dépôt (lecture seule), des captures d'écran ou enregistrements, et le site en ligne. Ne modifiez jamais le dépôt, n'ouvrez pas de secrets, ne vous connectez pas et n'appelez pas de services en ligne.

Lisez-le comme décrit dans references/intake.md :

• ce que c'est et à qui cela s'adresse
• le parcours utilisateur, écran par écran, dans les mots du produit lui-même
• les arguments de vente, classés (pourquoi quelqu'un passerait à ce produit)
• le moment « aha »
• la marque (logo, couleurs, polices, ton)
• des données réalistes
• ce qu'il ne faut pas montrer

Rédigez la note de compréhension produit et obtenez l'accord de la personne (ou énoncez vos hypothèses lorsque vous travaillez seul). Tout ce que la personne a demandé de montrer, explorer ou expliquer y figure comme élément à montrer absolument.

Notez les polices, couleurs, rayons, espacements, textes réels et données réelles des écrans réels. La vidéo doit ressembler à leur marque, pas à un modèle de motion générique ; inventer un look est la raison la plus courante pour laquelle une première version est rejetée.

Si la personne partage une vidéo de référence, étudiez-la image par image avant de concevoir (bash scripts/study-reference.sh ref.mp4 out/). Notez ce qu'elle fait réellement :

• distance et angle de la caméra
• taille et rôle du texte
• signification de ses couleurs
• comment les plans s'enchaînent
• son tempo et son arc narratif

Dites à la personne votre lecture, et confirmez-la avant de construire. Ne construisez jamais à partir d'une seule capture d'écran d'une référence.

3. Concept : une idée originale d'abord, puis un style

Construisez-le à partir de la note de compréhension produit (le parcours, les arguments de vente classés, le moment « aha »). Faites la méthode d'originalité dans references/originality.md en premier, à chaque fois, même lorsque vous travaillez seul :

1. trouvez la vérité humaine
2. écrivez 8 concepts sous 8 angles différents
3. éliminez les concepts génériques avec les tests de permutation et de cliché
4. choisissez le survivant le plus audacieux qui vend encore, et notez les idées évidentes que vous avez rejetées

L'idée la plus probable pour tout produit logiciel (taper une requête → le résultat se construit → toasts → montage → slogan → logo) est interdite comme squelette. Tout le reste dans ce skill (démos, guide de terrain, recettes, films passés) montre des mécanismes, jamais un ordre de plans à copier.

Ensuite, choisissez le style dans references/styles.md :

• film produit cinématographique
• film produit lumineux et épuré
• verre atmosphérique
• explicateur narré
• une journée dans la vie
• mené par un personnage
• plan héroïque
• sizzle
• vitrine de cartes
• démonstration guidée
• typographie cinétique
• histoire de données

Lisez references/patterns.md avant de choisir : c'est le guide de terrain de ce que font réellement les bons films de lancement.

Le genre dit à quoi sert la vidéo ; le style dit comment elle se ressent. Lorsque le brief est ouvert, proposez deux styles comme deux directions.

Ensuite, écrivez l'histoire en une phrase, puis la métaphore visuelle qui la porte, tirée des propres noms et verbes du sujet. Listez les scènes : une idée chacune, chacune avec un moment signature (le temps fort de l'animation qui prouve le point), également tiré du sujet. Lorsque le brief est ouvert, proposez deux directions et laissez la personne choisir. references/craft.md contient les principes profonds (vrais dans tous les styles), la méthode, le vocabulaire du mouvement et les règles de timing. Lisez ses principes avant chaque concept.

4. Le plan de production : tout le film, image par image

Avant tout code, écrivez le plan complet dans le format de references/plan.md :

• le film sur une page : concept, idées évidentes rejetées, objet héros, l'arc émotionnel, quels arguments de vente apparaissent où
• le look sous forme de tokens
• chaque plan image par image : chaque changement visible horodaté, plus la caméra, les effets, les transitions entrée et sortie, le texte, le son, les assets et les mouvements
• 4 à 8 images clés rendues
• les risques

Les attentes n'ont pas de limite à ce stade : décrivez le film à son meilleur, puis construisez pour l'atteindre. Chaque plan doit faire avancer l'histoire ; sinon, coupez-le. Montrez le plan et les images clés, et ne construisez qu'après un accord. Lorsque vous travaillez seul, vérifiez le plan par rapport à la liste de contrôle qualité et à originality.md, et corrigez-le avant de construire. Rédigez toute voix-off maintenant, car elle détermine le timing. references/voice-and-sound.md couvre le format de script que les outils de voix AI lisent bien, le rythme, la prononciation et le son. Pour un lancement produit, planifiez la chaîne : quel élément porte chaque écran vers le suivant (craft.md, « Écrans connectés »).

5. Construction

Copiez assets/engine-starter.html et assets/motion.js à côté des assets du projet, et construisez plan par plan. Construisez d'abord à partir de la bibliothèque de mouvements (references/moves.md) :

• le gros plan de frappe (macroType)
• countUp
• la descente dans le mur (wall)
• buildIn, cascade, montage, growToWord
• cursor et clickZoom
• morphRect
• la profondeur de champ (twin)
• shots pour les coupes, et start pour l'aperçu et l'enregistrement

assets/moves-demo.html montre comment chacun est appelé. Lisez-le pour les mécanismes uniquement ; son ordre de plans est le défaut interdit, jamais un modèle. N'utilisez un mouvement que là où le concept en a besoin ; un film peut n'en utiliser aucun. Ne construisez à la main que ce que la bibliothèque ne couvre pas, et lorsqu'un nouveau mouvement fait ses preuves, ajoutez-le à la bibliothèque sous la même forme.

Prenez chaque durée et courbe dans references/motion-tokens.md, pas dans des suppositions. Suivez le contrat et les pièges dans references/engine.md ; ils proviennent de bugs réels.

Pour tout ce qui dépasse environ 20 s, faites d'abord une passe de timing approximatif : des boîtes grises avec les vrais mouvements de caméra et timings, quelques images. Obtenez le bon rythme, puis remplacez par le vrai art sans changer le timing.

6. Porte : planche de contact

Rendez 8 à 16 moments clés avec node scripts/record.mjs page.html stills/ --stills 1,3.5,..., puis bash scripts/contact-sheet.sh stills/ sheet.jpg. Révisez-la vous-même d'abord par rapport à la liste de contrôle ci-dessous et aux fichiers de goût ; corrigez et re-rendez. Ensuite seulement, montrez-la à la personne. N'enregistrez pas la vidéo complète tant que les images ne sont pas bonnes.

7. Enregistrement, voix, adaptation, mixage

Enregistrez une version préliminaire (--scale 1 --fps 30) pour révision, et la version finale avec --scale 2 --blur 4 : suréchantillonnée, puis réduite, avec un flou de mouvement réaliste style film. Lorsqu'une prise de voix arrive, exécutez node scripts/voice-segments.mjs voice.wav pour trouver chaque ligne parlée. Étirez l'animation sur la voix avec la table de time-warp. Ne coupez ni n'accélérez la voix. Placez les lignes et la musique avec node scripts/mix.mjs mix.json.

8. Livraison

Exportez par canal, plus une miniature et le texte d'accompagnement (references/delivery.md). Vérifiez le fichier final : extrayez des images du mp4 lui-même (un appel ffmpeg par image) et vérifiez la durée et le volume sonore.

9. Apprentissage

Lorsque la personne réagit, écrivez ce qu'elle a aimé ou rejeté, et pourquoi, dans son fichier de goût (créez MOTION_TASTE.md, ou ~/.claude/motion-video-taste.md si c'est son goût plutôt que celui du projet). Si une leçon peut aider tout le monde, proposez de l'ajouter à references/taste.md. C'est ainsi que chaque vidéo surpasse la précédente.

Liste de contrôle qualité (à exécuter sur chaque planche de contact)

• Ressemble à la vraie marque/produit : mêmes polices, couleurs, rayons, composants. Rien d'inventé.
• Une idée par écran. Si l'œil doit lire deux choses à la fois, coupez-en une.
• Rien de coupé, superposé ou à l'étroit : le texte s'enroule proprement, les logos sont centrés optiquement, les cartes sont entières, les marges de sécurité sont respectées.
• Couleurs fidèles : pas de filtres délavés ou de voiles gris ; le texte a du contraste.
• Le mouvement a du poids : accélérations et décélérations, ressorts qui s'arrêtent, linéaire uniquement pour les horloges et barres de progression.
• Les transitions sont motivées (un mouvement de caméra, un passage d'objet, une poussée), et la scène reste lisible pendant leur déroulement.
• L'écran et la voix sont en accord : la chose dite est la chose à l'écran à ce moment-là.
• Les faits sont réels et sûrs à publier (voir delivery.md).
• Fin : logo de marque plus un lien ou une action. Pas de demandes supplémentaires que la personne n'a pas voulues.
• Lisible sur téléphone : le texte important fait 40 px ou plus sur la scène, ou la caméra zoome jusqu'à ce que ce soit le cas. Vérifiez la planche réduite à environ 375 px de large.
• Chaque plan s'immobilise : après chaque mouvement, il y a un moment fixe assez long pour lire (0,5 s + 0,3 s par mot).
• Le style tient : les enchaînements, la couleur, le texte et la caméra suivent la recette du style choisi tout du long.
• Actions, pas écrans : chaque plan montre quelqu'un en train de faire quelque chose, ou le résultat de cette action.
• L'échelle et le tempo changent au moins une fois (rapproché ↔ large, lent ↔ rapide).
• La couleur d'accent a une seule signification.
• Chaque image vérifiée à l'œil : le bon produit pour son étiquette, le bon logo, rien de recadré ou d'étiré. Ouvrez chacune ; ne faites pas confiance aux noms de fichiers.
• Les nombres ont du sens : seuls les totaux et les montants croissants sont comptés ; les prix et les valeurs fixes apparaissent simplement.
• Transitions propres : le texte part avant que quelque chose passe dessus (pas d'engloutissement blanc sur blanc), et pas d'images vides entre les plans.
• Spécifique, pas générique : au moins un moment que seul ce sujet pourrait avoir ; les mouvements de bibliothèque uniquement là où le sujet a cette action.
• Original : il passe le test de permutation, il n'utilise pas de squelette interdit (originality.md), et il ne partage pas un ordre de plans avec les démos ou avec le dernier film réalisé avec ce skill.

Avant de montrer quoi que ce soit à la personne, notez-le sur 10 pour chacun de ces critères : correspondance à la marque, clarté de l'histoire, qualité du mouvement, lisibilité, transitions, synchronisation son/voix, finition. Corrigez tout ce qui est en dessous de 8 d'abord.

Fichiers

• references/genres.md : types de vidéos avec structure, durée et formats par défaut.
• references/intake.md : les questions de collecte (avec valeurs par défaut), comment lire un dépôt pour le parcours utilisateur et les arguments de vente, et la note de compréhension produit.
• references/kinds/ : un guide par type de vidéo (film de lancement, pub héroïque, explicateur, film narratif, film avec personnage, typographie cinétique, sizzle, teaser, vitrine d'ambiance, démonstration guidée, vitrine de démonstration, histoire de données) : quoi demander, formes possibles, univers, mouvements, exemples, pièges. kinds/README.md est le menu.
• references/plan.md : le format du plan de production : le film sur une page, tokens de look, chaque plan image par image, images clés, risques.
• references/originality.md : lisez en premier. La méthode pour un concept original à chaque fois : vérité humaine, 8 angles, tests d'élimination, clichés interdits. Il remplace tous les exemples du skill.
• references/patterns.md : le guide de terrain issu d'une étude image par image de 15 films de lancement solides : ce que presque tous font, la typographie cinétique, les transitions, montrer le produit en fonctionnement, quand les angles fonctionnent, les structures, les détails professionnels. Lisez-le au stade du concept.
• references/styles.md : douze styles distincts (film produit cinématographique, explicateur narré, vitrine de cartes, démonstration guidée, typographie cinétique, histoire de données, film produit lumineux et épuré, verre atmosphérique, une journée dans la vie, mené par un personnage, plan héroïque, sizzle), chacun une recette complète : caméra, texte, couleur, enchaînements, tempo, arc, pièges.
• references/craft.md : principes profonds, méthode du concept, composition, vocabulaire du mouvement (macro frappe, mur de résultats, écrans connectés, zoom clic, caméra), timing.
• references/motion-tokens.md : les nombres : courbes, durées, ressorts, décalages, poses de lecture, tailles de texte sur téléphone, bea...