Doctrine de Mouvement (Gateway)
Lisez ceci avant de composer une animation. Cela décide CE qui se passe à chaque couture et comment chaque scène se comporte ; les compétences techniques l'implémentent. Ces règles remplacent les directives de mouvement génériques. L'échec que cela évite : des scènes créées de manière isolée — l'élan de l'œil meurt à chaque coupure, et les scènes oscillent sur place entre l'entrée et la sortie.
Carte des routes
| Décision (cette compétence) | Compétence d'implémentation |
|---|---|
| Choix de transition de couture + paramètres + code | cut-the-curve §1–5 (le catalogue) |
| Cascades d'entrée de texte / élément | cut-the-curve §6 (entrée en cascade) |
| Repositionnement de groupe dans la scène (sans coupure) | cut-the-curve §7 (courbe de nudging) |
| Action / lancement de scène / ignition de morph pilotés par curseur | oversized-cursor |
| Mécanismes de rendu de couture / garde de flash blanc | seam-craft |
| Travail de lancement de produit / explicatif / légendes | superpose text-beat-economics, brand-faithful, captions-overlay par-dessus la compétence en amont |
Ordre de création : registre vectoriel (ledger.json) → ESTAMPER les coutures maîtresses à partir de celui-ci (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → route de mouvement soutenu par phase → porteurs et causes → composer les builds → VÉRIFIER (scripts/seam-gate.mjs).
N'écrire à la main que les morphs / match-cuts de niveau A ; les coutures estampillées passent la porte par construction.
Partie 1 — La Loi de la Couture
La Loi Vectorielle
La façon dont la Scène A sort détermine la façon dont la Scène B entre : même axe, même direction, vitesse adaptée, coupure en plein mouvement des deux côtés.
- Axe — x reste x, y reste y, Z reste Z. Ne jamais échanger d'axes lors d'une coupure.
- Direction — ne jamais inverser. Sur Z, direction = le SIGNE du changement d'échelle : grandir = pousser (caméra vers l'avant), rétrécir = tirer (caméra vers l'arrière). Une sortie en recul répondue par une entrée en croissance depuis une petite taille est un vecteur inversé — la violation la plus courante, car grandir depuis une petite taille est l'entrée d'élément par défaut.
- Vitesse — vitesse initiale d'entrée ≈ vitesse finale de sortie, via des easings en miroir (sortie
power4.in+ entréepower4.out, même distance et durée ; le côté entrant récupère ≥50% du chemin notionnel). Mécanique danscut-the-curve. - Phase — la coupure atterrit en plein mouvement des DEUX côtés. Se stabiliser au repos avant la coupure, ou démarrer du repos après celle-ci, est un temps mort.
Le Courant
Chaque film choisit UNE direction dominante (par défaut : GAUCHE). Chaque couture ordinaire l'utilise. Les autres vecteurs sont RÉSERVÉS — en utiliser un signifie quelque chose :
| Vecteur | Signification |
|---|---|
| Le courant (GAUCHE) | "prochain temps" — progression neutre vers l'avant |
| Vers le haut | élévation — une conclusion ou une révélation s'élève au-dessus de ce qui précède |
| Z vers l'avant (zoom-traversée) | pousser plus profondément dans la même pensée |
| Z vers l'arrière (zoom inverse) | ARRIVÉE — quelque chose de plus grand atterrit |
| Explosion d'échelle (éclatement) | quitter un monde — une surface explose devant la caméra |
- Ne jamais exécuter des coutures consécutives dans des directions opposées — le ping-pong est interprété comme une erreur.
- Un changement de direction nécessite une cause visible (clic / rebond / impact) ou une limite de chapitre.
Le Registre Vectoriel
Écrivez-le avant de créer toute timeline maîtresse — sous la forme ledger.json à la racine du projet
(schéma : references/seam-gate.md). Une ligne par couture : heure de coupure, vecteurs de sortie et d'entrée
(axe + direction signée ; les lignes Z portent le signe d'échelle), sélecteurs, technique. La sortie et
l'entrée doivent correspondre ; si une ligne ne correspond pas, corrigez le plan, pas l'easing. Le vérificateur
contrôle la cohérence des lignes de manière statique avant tout échantillonnage d'exécution.
Porteurs
L'œil suit les objets, pas les abstractions. Les coutures les plus fortes passent un porteur concret à travers la coupure à une position ET vitesse adaptées : un curseur à mi-chemin, un conteneur qui rétrécit / s'amarre dans la mise en page suivante, une marque qui vole vers son emplacement exact, le groupe de mots d'une coupure en cascade. Sans porteur naturel, les héros de la scène le portent (trajet partiel + dissolution précoce, entrée en plein vol). Jamais de fondu enchaîné — il n'a aucun porteur.
Mouvement Causal
Enchaînez les mouvements pour que chaque déplacement soit visiblement lancé par le précédent : clic → compression → détente du ressort → vol → impact → recul → révélation.
- Les effets commencent SUR l'image causale — même position dans la timeline, jamais "peu après."
- Les réactions sont proportionnelles à la masse impliquée : les grands éléments rebondissent plus lentement, les petits claquent.
- Une force est une licence pour changer de direction ; un changement de direction non causé est un ping-pong.
La Porte de Couture (porte de build — exécutez le vérificateur, sortie 0 ou la couture n'est pas terminée)
node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html # générer
node <SKILL_DIR>/scripts/seam-gate.mjs verify --ledger ledger.json --project . # vérifier
Le script (utilisation + schéma du registre : references/seam-gate.md) applique numériquement, par
couture : cohérence de la ligne du registre, sortie encore en mouvement à la coupure, entrée en plein vol (jamais
au repos), direction mesurée = direction du registre, correspondance de vitesse entrée/sortie (AVERTISSEMENT),
chevauchement zéro (un côté visible par image — la coupure n'est pas une dissolution), la règle du signe Z
(d(échelle)/dt même signe des deux côtés ; les propres entrées de la scène entrante sont scannées pour
détecter les conflits de signe), et continuité du rectangle porteur avec l'échelle ancêtre incluse. Utilisez
seam-gate.mjs probe --t <coupure> pour trouver les vrais sélecteurs de porteur de chaque couture lors de la
rédaction du registre.
Règles que le script ne peut pas vérifier — toujours à votre charge :
- Les modifications rouvrent la couture. Tout changement dans la première/dernière ~1s d'une scène (y compris le ré-étalonnage pour une nouvelle VO) invalide l'audit de cette frontière — réexécutez le vérificateur.
- L'audio est l'horloge. Réétalonnez les scènes sur les horodatages réels des mots de la VO ; ne précipitez jamais une lecture pour tenir dans un créneau. Une régénération de VO rouvre ses coutures.
- Piège du clip-gating (la cause habituelle d'un ÉCHEC de chevauchement zéro) : un clip dont
data-startprécède son interpolation d'entrée est découvert à son opacité initiale — définissezautoAlpha: 0initial ETdata-start= l'heure de la coupure, jamais plus tôt.
Partie 2 — Performance (la scène continue de performer)
Pas d'oscillation inutile
Les boucles sinusoïdales inactives (respirer, flotter, dériver, pulsation de lueur) sont INTERDITES en tant que mouvement soutenu — elles sont interprétées comme "la vidéo attend." Une scène qui finit d'entrer avec des secondes restantes est un bug de planification : ajoutez de l'histoire, pas de l'oscillation. Chaque phase entre l'entrée et la sortie est détenue par l'une de ces routes (nommez la route dans le plan) :
| Route | Ce que c'est |
|---|---|
| Révélations échelonnées | Retenez le contenu ; distribuez-le sur les temps de narration — le cadre continue de gagner de l'information (par défaut pour ≥2 groupes de contenu) |
| Caméra avec intention | Un chemin d'échelle + panoramique cartographié : établir le plan large → voyager → arriver sur le sujet |
| Vie UI séquencée | Le produit se comporte dans le temps : la progression avance, l'étape se met en surbrillance, les comptages défilent |
| Séquences animées | Les éléments exécutent un temps : une carte se classe dans une pile, un objet est glissé, un résultat s'assemble |
| Action pilotée par curseur | Un curseur surdimensionné guide l'œil vers un déclencheur ; son CLIC déclenche le temps suivant (oversized-cursor) |
Test : faites une pause à n'importe quelle seconde — quelque chose de significatif doit être en plein vol (une révélation qui atterrit, la caméra qui voyage, l'UI qui fait ce que la narration dit).
Calme avant le point culminant
Prévoyez une pause de 0,3 à 0,75 s entre l'action majeure et son résultat — la virgule dramatique. Une scène qui passe directement de l'action au résultat perd son effet.
Intention de synchronisation
- Entrée unique ≤ ~800 ms ; un buildup plus long = un décalage de plusieurs éléments, pas un seul élément lent.
- Sortie ≈ 75 % de l'entrée. Exception :
cut-the-curveinverse cela (entrée ~127 % de la sortie). - Décalage total ≤ 500 ms ; avec 8+ éléments, resserrez le délai par élément ou décalez les premiers.
- Easings interdits :
bounce.out/elastic.out. Le dépassement d'entréeback.out(1.4–1.7)est acceptable. - Les éléments similaires partagent une intention d'easing+durée — jamais une paire unique par élément.
Vocabulaire de transition
Utilisez seulement 2–3 transitions inter-scènes par film et répétez-les ; la frontière par défaut est
cut-the-curve dans la direction du courant. Les morphs d'élément partagé écrits à la main
(intent: morph) ne comptent pas dans le budget.
Anti-Motifs
| À ne pas faire | À la place |
|---|---|
| Créer l'entrée de chaque scène isolément | Écrire d'abord le registre vectoriel |
| Fondu enchaîné entre les scènes | Couper la courbe dans la direction du courant |
| La sortie se termine, PUIS la scène change | Couper en plein mouvement des deux côtés |
| L'entrée commence au repos après une coupure | Entrer ≥50 % du chemin notionnel |
| Zoom inverse en sortie → entrée en croissance depuis une petite taille (ou poussée → rétraction surdimensionnée) | Faire correspondre le signe de la vitesse d'échelle (Porte de Couture 7) |
| L'introduction pop-in de la scène entrante sous un passage en Z | Maintenir son cadre d'ouverture composé, ou faire correspondre le signe |
| Oscillation inutile / respiration / flottement pour remplir le temps | Attribuer une route de mouvement soutenu ; ou ajouter de l'histoire |
| Changement de direction sans cause | Dépenser une force, ou garder le courant |
| Vecteurs réservés utilisés comme variété | Par défaut, utiliser le courant ; dépensez-les pour le sens |
| Réaction quelques images après sa cause | Même cadre d'ignition |
| L'action passe directement au résultat | Planifier le calme avant le point culminant (0,3–0,75 s) |