Doctrine de Mouvement (Porte d'Entrée)
À lire avant de composer une animation. Elle décide CE qui se passe à chaque jointure et comment chaque scène performe ; les compétences techniques l'implémentent. Ces règles remplacent toute directive de mouvement générique ou en amont. L'échec à éviter : des scènes créées isolément — l'élan de l'œil meurt à chaque coupe, et les scènes oscillent sur place entre l'entrée et la sortie.
Carte des itinéraires
| Décision (cette compétence) | Compétence d'implémentation |
|---|---|
| Choix de transition de jointure + paramètres + code | cut-the-curve §1–5 (le catalogue) |
| Cascades d'entrée de texte / éléments | cut-the-curve §6 (entrée en cascade) |
| Repositionnement de groupe dans une scène (sans coupe) | cut-the-curve §7 (courbe d'ajustement) |
| Action / lancement de scène / ignition de morphing mené par le curseur | oversized-cursor |
| Mécanismes de rendu de jointure / protection anti-flash blanc | seam-craft |
| Travail de lancement de produit / d'explication / de sous-titres | superpose text-beat-economics, brand-faithful, captions-overlay par-dessus la compétence en amont |
Ordre de création : registre vectoriel (ledger.json) → ESTAMPILLER les jointures maîtresses à partir de celui-ci (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → itinéraire de mouvement soutenu par phase → porteurs et causes → composer les constructions → VÉRIFIER (scripts/seam-gate.mjs).
Ne faites à la main que les morphing/raccords de niveau A ; les jointures estampillées passent la porte par construction.
Partie 1 — La Loi de la Jointure
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, coupe en plein mouvement des deux côtés.
- Axe — x reste x, y reste y, Z reste Z. Ne jamais échanger d'axes à travers une coupe.
- Direction — ne jamais inverser. Sur Z, la 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 qui recule répondue par une entrée qui grandit depuis une petite échelle est une inversion vectorielle — la violation la plus courante, car grandir depuis une petite échelle est l'entrée d'élément par défaut.
- Vitesse — vitesse initiale de l'entrée ≈ vitesse finale de la sortie, via des eases inversés (
power4.inen sortie +power4.outen entrée, même distance et durée ; le côté entrant récupère ≥50% du chemin notionnel). Mécanismes danscut-the-curve. - Phase — la coupe atterrit en plein mouvement des DEUX côtés. S'arrêter avant la coupe, ou démarrer du repos après, est un temps mort.
Le Courant
Chaque film choisit UNE direction dominante (par défaut maison : GAUCHE). Toute jointure 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 a précédé |
| Z avant (zoom traversant) | plonger plus profondément dans la même pensée |
| Z 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 enchaîner des jointures 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 jointure : temps de coupe, 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 statiquement avant tout échantillonnage en temps réel.
Porteurs
L'œil suit les objets, pas les abstractions. Les jointures les plus solides passent un porteur concret à travers la coupe avec une position ET une vitesse adaptées : un curseur à mi-chemin, un conteneur qui se réduit/s'accroche à la mise en page suivante, une marque qui vole jusqu'à son emplacement exact, le groupe de mots d'une coupe en cascade. Sans porteur naturel, les héros de la scène le portent (trajet partiel + fondu précoce, entrée en plein vol). Jamais de fondu enchaîné — il n'a aucun porteur.
Motion Causale
Enchaînez le mouvement pour que chaque déplacement soit visiblement lancé par le précédent : clic → écrasement → ressort de détente → 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 à l'échelle de la masse implicite : les gros éléments rebondissent plus lentement, les petits claquent.
- Une force est une licence pour changer de direction ; un retournement sans cause est un ping-pong.
La Porte de Jointure (porte de construction — exécutez le vérificateur, sortie 0 ou la jointure 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 jointure : cohérence de la ligne de registre, sortie encore en mouvement à la coupe, entrée en plein vol (jamais depuis le repos), direction mesurée = direction du registre, correspondance de vitesse entrée/sortie (AVERTISSEMENT), chevauchennent zéro (un côté visible par image — la coupe n'est pas un fondu), 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 des conflits de signe), et la continuité du rectangle porteur avec l'échelle ancêtre incluse. Utilisez seam-gate.mjs probe --t <coupe> pour trouver les vrais sélecteurs de porteur de chaque jointure lors de la création du registre.
Règles que le script ne peut pas vérifier — toujours les vôtres :
- Les modifications rouvrent la jointure. 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 — relancez 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 l'adapter à un créneau. Une régénération de la VO rouvre ses jointures.
- Piège du clip-gating (la cause habituelle d'un ÉCHEC de chevauchement zéro) : un clip dont le
data-startprécède son tween d'entrée est démasqué à son opacité initiale — définissezautoAlpha: 0initial ETdata-start= le temps de coupe, jamais plus tôt.
Partie 2 — Performance (la scène continue de performer)
Pas d'oscillation oisive
Les boucles sinusoïdales oisives (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 des oscillations. Chaque phase entre l'entrée et la sortie est propriétaire de l'un de ces itinéraires (nommez l'itinéraire dans le plan) :
| Itinéraire | Ce que c'est |
|---|---|
| Révélations échelonnées | Retenez du contenu ; révélez-le sur des temps de narration — le cadre continue d'apporter de l'information (par défaut pour ≥2 groupes de contenu) |
| Caméra avec intention | Un chemin de zoom+pan cartographié : établir large → voyager → arriver sur le sujet |
| Vie d'interface séquencée | Le produit se comporte dans le temps : la progression avance, les étapes se mettent en évidence, les compteurs défilent |
| Séquences animées | Les éléments jouent un temps : une carte se range dans une pile, un élément est glissé, un résultat s'assemble |
| Action menée par le curseur | Un curseur surdimensionné guide l'œil vers un déclencheur ; son CLIC allume le temps suivant (oversized-cursor) |
Test : mettez en pause à n'importe quelle seconde — quelque chose de significatif doit être en plein vol (une révélation qui arrive, la caméra qui voyage, l'interface qui fait ce que la narration dit).
Calme avant le sommet
Planifiez une pause de 0,3–0,75s entre l'action majeure et son résultat — la virgule dramatique. Une scène qui passe directement de l'action au résultat la perd.
Intention de timing
- Entrée unique ≤ ~800ms ; accumulation plus longue = étalement multi-éléments, pas un seul élément lent.
- Sortie ≈ 75% de l'entrée. Exception :
cut-the-curveinverse ce rapport (entrée ~127% de la sortie). - Étalement total ≤ 500ms ; avec 8+ éléments, resserrez le délai par élément ou étalez les premiers.
- Eases interdits :
bounce.out/elastic.out. Dépassement d'entréeback.out(1.4–1.7)est acceptable. - Les éléments similaires partagent une intention d'ease+durée — jamais une paire unique par élément.
Vocabulaire de transition
N'utilisez que 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 morphings d'éléments partagés écrits à la main (intent: morph) ne comptent pas dans le budget.
Anti-Patterns
| À ne pas faire | À 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 | cut-the-curve 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 depuis le repos après une coupe | Entrer ≥50% à travers le chemin notionnel |
| Sortie en zoom inverse → entrée qui grandit depuis une petite échelle (ou poussée → rétraction surdimensionnée) | Adapter le signe de la vitesse d'échelle (Porte de Jointure 7) |
| Intro pop-in de la scène entrante sous un relais Z | Tenir son image d'ouverture composée, ou adapter le signe |
| Oscillation oisive / respiration / flottement pour remplir le temps | Attribuer un itinéraire de mouvement soutenu ; ou ajouter de l'histoire |
| Inversion de direction sans cause | Dépenser une force, ou garder le courant |
| Vecteurs réservés utilisés comme variété | Utiliser le courant par défaut ; les dépenser pour le sens |
| Réaction quelques images après sa cause | Ignition sur la même image |
| L'action passe directement au résultat | Planifier le calme avant le sommet (0,3–0,75s) |