Claude Motion System — guide maîtresse de l'utilisateur
Le guide complet se trouve dans GUIA-MAESTRA.md (même dossier, 20 sections). Ne le charge pas en entier : lis la section requise par la tâche (cherche l'en-tête # N. avec Grep et lis ce passage).
Règle principale (§0)
Avant de concevoir, générer, animer, éditer ou rendre tout élément visuel d'un projet, lis MOTION.md en entier (racine du dépôt). S'il n'existe pas, est vide ou ne représente plus la conception réelle, audite d'abord le projet et crée-le ou mets-le à jour. Le motion renforce l'information, la hiérarchie, la narration et la marque ; il n'est jamais une décoration ni une démo générique d'IA.
Routinue
- Découvrir (§3) : README, CLAUDE.md, package.json, tokens CSS/Tailwind, composants et layouts, logos, polices, assets, captures, Figma, vidéos et audios existants. Répondre : personnalité, couleurs dominantes et fonctionnelles, typographies réelles, hiérarchie, quel mouvement est cohérent et ce qui ne doit jamais changer.
- Classifier (§3) : A sans besoin de motion (n'installer rien) · B application avec potentiel de démos (créer
MOTION.md, sans projet vidéo) · C motion/vidéo actif (préparer HyperFrames et QA) · D avec After Effects (en plus, MCP de AE). MOTION.md(§5) : objectif, identité, couleur, typographie, grille, langage de mouvement (principes, timing, easing, interdictions), motion par composant, caméra/3D, audio, coupes, formats et quality bar. Se construit à partir de l'identité RÉELLE ; complète le design system, ne le remplace pas. Si le produit a changé, corriger avant de produire.- Nouvelle pièce :
BRIEF.md(§6) →STORYBOARD.md(§7). Chaque scène remplit une fonction narrative, informative ou de marque. - Audio (§8) : la musique est l'horloge éditoriale — beats fiables, phrases, drops, silences ; ne pas forcer une grille de beat.
- Implémenter (§9) : HyperFrames (
/hyperframescomme entrée) ou le moteur que le projet a déjà. Ne pas dupliquer les moteurs (§13) : si le dépôt a déjà son propre moteur de motion, on utilise celui-là. - QA (§11) : doctor → lint → check → snapshots des frames critiques (les regarder) → preview complète → render →
ffprobeet révision du fichier final. Jamais « prêt » juste parce que ça compile. - Critère « ne pas avoir l'air cheap » (§12) et définition de prêt (§17) : MOTION-READY et DELIVERY-READY.
Règles de sécurité et de dette
- N'installer aucune dépendance vidéo dans des projets qui ne produisent pas de vidéo (§3, §13).
npxde tiers (HyperFrames, MCP de After Effects) uniquement quand on va produire et avec l'approbation de l'utilisatrice.- After Effects par MCP uniquement s'il existe un
.aepou que la livraison l'exige ; sauvegarde avant de le toucher (§10). - Actifs réels de la marque ; ne jamais inventer de logos, données, captures ou claims (§15). Données clients, jamais dans des pièces visuelles sans approbation.
- Recomposition par format (16:9, 9:16, 1:1), jamais de recadrage aveugle (§16).
Index du guide
| § | Sujet |
|---|---|
| 0 | Ordre maître |
| 1 | Ce qu'enseigne la vidéo (HyperFrames, MOTION.md, musique, After Effects) |
| 2 | Architecture globale + par projet |
| 3 | Bootstrap : découverte et classification |
| 4 | Installer/vérifier HyperFrames |
| 5 | Modèle de MOTION.md |
| 6 | BRIEF.md |
| 7 | STORYBOARD.md |
| 8 | Audio comme horloge éditoriale |
| 9 | Implémentation avec HyperFrames |
| 10 | After Effects par MCP |
| 11 | Pipeline de QA obligatoire |
| 12 | Critère « ne pas avoir l'air cheap » |
| 13 | Pas de dette technique |
| 14 | Organisation recommandée |
| 15 | Politique des actifs |
| 16 | Multiformat |
| 17 | Définition de « prêt » |
| 18 | Prompt unique pour préparer un dépôt |
| 19 | Commandes de référence |
| 20 | Principe final |