Cut the Curve — le catalogue de techniques
Cinq techniques SEAM, un principe : couper à la vélocité maximale, faire correspondre la direction et la vitesse des deux côtés de la coupure — plus deux techniques intra-scène (§6 arrivées, §7 glissements). La loi SEAM — loi vectorielle, le courant, le registre, la Porte Seam — vit dans motion-doctrine ; lisez-la d'abord. Ce skill contient les paramètres et la mécanique. Tous les modèles de code GSAP (worker + registre) : examples/gsap-implementation.md.
Catalogue
| # | Technique | Portée | Axe | Utilisation |
|---|---|---|---|---|
| 1 | Zoom avant (avant) | Échange de texte intra-scène | Z, vers le spectateur | progresser dans la même pensée |
| 2 | Zoom arrière inverse | Battement d'arrivée / récompense | Z, loin du spectateur | quelque chose de plus grand se pose |
| 3 | Cut the Curve | Entre scènes | X / Y | la frontière par défaut, le courant du film |
| 4 | Coupure en cascade | Jointure texte-texte | X, par mot | passage mot à mot entre grands battements de texte |
| 5 | Flou de mise au point | Échange d'état sur la même surface | X / Y / Z | la coupure que vous VOULEZ VOIR — un effet de mise au point DSLR |
| 6 | Entrée en cascade | ARRIVÉE intra-scène (pas de jointure) | Y, par le bas | cartes-titres, ouvreurs de segments, intros de listes |
| 7 | Courbe de nudging | Glissement de groupe intra-scène (pas de jointure) | X / Y | repositionner un groupe composé pour faire de la place |
La direction Z est un signe
« Même axe » ne suffit pas sur Z — le signe de d(échelle)/dt doit correspondre des deux côtés de la coupure :
| Vecteur Z | Échelle de sortie | Échelle d'entrée | Variante |
|---|---|---|---|
| Poussée (avant) | croissante 1 → 1.2 | croissante 0.75 → 1 | zoom avant |
| Tirage (arrière) | décroissante 1 → 0.8 | décroissante 1.25 → 1 | zoom arrière inverse |
Miroirs interdits : une sortie en retrait répondue par une entrée de petite à grande (le tirage se transforme en poussée — le cas courant, car le passage de petite à grande est l'entrée d'élément par défaut), et une sortie en poussée répondue par une rétraction surdimensionnée. Cela lie les PROPRES entrées de la scène entrante pendant la fenêtre de jointure (coupure + ~0,5 s), pas seulement le tween wrapper : maintenez le cadre entrant composé, ou autorisez son entrée pour correspondre au signe. Vérifiez selon la règle 7 de la Porte Seam.
Logique de flou (toutes les variantes Z)
| Sujet | Flou maximal | Pourquoi |
|---|---|---|
| Échelle de texte (titre, groupe de mots) | 10 px | 20 px brouille les lettres — la coupure se lit comme un bug, pas de la vitesse |
| Surface plein cadre (fenêtre, carte, capture d'écran) | 18–20 px | un flou plus léger sur une grande surface se lit comme un hoquet de rendu |
Même flou maximal des deux côtés à l'image d'échange. Floutez le WRAPPER, jamais les enfants.
1. Zoom avant (avant)
Coupure adaptée en vélocité sur l'axe Z ; jamais les deux textes visibles. Tout CROÎT : le texte sortant accélère vers la caméra, un échange dur cache au flou maximal, le texte entrant continue de croître dans le plan focal. Titres et phrases courtes seulement. Total ≈ 0,4 s.
| Phase | Échelle | Flou | Opacité | Ease | Durée |
|---|---|---|---|---|---|
| Sortie | 1 → 1.2 | 0 → 10 px | 1 → 0.15 | power3.in (opacité : tween none séparé) | 0,2 s |
Coupure (tl.set) | entr. : 0.75 | 10 px | sort. : 0 / entr. : 0.15 | — | — |
| Entrée | 0.75 → 1 | 10 → 0 px | 0.15 → 1 | expo.out | 0,5 s |
L'opacité de sortie DOIT être son propre tween linéaire — power3.in maintient l'opacité proche de 1 trop longtemps. À l'entrée, toutes les propriétés partagent expo.out.
2. Zoom arrière inverse (arrière)
Le miroir du retrait : l'élément sortant RECULE ; l'élément entrant arrive SURDIMENSIONNÉ (comme juste derrière la caméra) et se rétracte dans le plan focal. Tout RÉTRÉCIT. Utilisez sur les battements ARRIVÉE/récompense — une ligne de récompense, une réponse géante, un état final maintenu — jamais les frontières ordinaires. Total ≈ 0,7 s (30 % sortie / 70 % entrée).
| Phase | Échelle | Flou | Opacité | Ease | Durée |
|---|---|---|---|---|---|
| Sortie | 1 → 0.8 | 0 → 10 px | 1 → 0.15 | power3.in (opacité : tween none séparé) | ~0,2 s |
Coupure (tl.set) | entr. : 1.25 | 10 px | sort. : 0 / entr. : 0.15 | — | — |
| Entrée | 1.25 → 1 | 10 → 0 px | 0.15 → 1 | expo.out | ~0,5 s |
Le flou est à l'échelle du texte (10 px) ; 18–20 px seulement quand les deux côtés sont des surfaces plein cadre.
Discipline de signe : la scène entrante arrive comme un cadre composé à l'intérieur du wrapper qui se rétracte — pas d'introduction de petite à grande dans la fenêtre de jointure. Les entrées échelonnées se produisent après que la rétraction se stabilise, ou commencent ≥1 et se rétractent.
3. Cut the Curve (frontière de scène par défaut)
Coupure adaptée en vélocité sur X/Y — la valeur par défaut pour TOUTES les frontières scène-à-scène, dans le courant du film, pas un accent. Le héros sortant accélère dans une direction, la coupure atterrit en plein mouvement, le héros entrant continue dans la MÊME direction et décélère. Total ≈ 0,6 s ; directions GAUCHE / DROITE / HAUT / BAS (par défaut GAUCHE).
Déplacement partiel : ~12 % du cadre (≈230 px à 1 920) — jamais de mouvements complets hors écran.
| Direction | Sortie | Début → fin entrée |
|---|---|---|
| Vers la gauche | x: 0 → −230 | x: +230 → 0 |
| Vers la droite | x: 0 → +230 | x: −230 → 0 |
| Vers le haut | y: 0 → −230 | y: +230 → 0 |
| Vers le bas | y: 0 → +230 | y: −230 → 0 |
Mécanique :
- Easings miroirs : sortie
power4.in+ entréepower4.out, même distance et durée — les deux moitiés d'unpower4.inOut, pour que la vélocité corresponde exactement à la coupure. - L'astuce de fondu : l'opacité de sortie se termine à ~25–30 % de son déplacement (fondu ≈ 0,18–0,3 s vs mouvement 0,3–0,34 s) ; l'entrée s'allume à ~0,35 d'opacité à mi-chemin. Chronométrez le dernier élément en fondu pour qu'il meure juste à la coupure — un espace où rien ne bouge se lit comme un temps mort.
- Sortie 0,2–0,4 s ; entrée ≥ sortie. Flou optionnel 8–10 px.
- Sol de scène :
#rootdoit être opaque (background: var(--canvas-deep, var(--canvas, #000))) — la coupure à mi-fenêtre crée une fenêtre d'opacité sommée < 1 qui flashe en blanc sinon (voirseam-craft).
push-slide existe mais viole le déplacement partiel et la phase de mi-mouvement ; préférez cut the curve.
4. Coupure en cascade (cut the curve mot par mot)
Cut the Curve à la granularité du MOT — la coupure vers la gauche la plus forte pour les jointures texte-texte. Les mots sortants s'éloignent sur leurs propres courbes ; les mots entrants cascadent en plein vol — une vague que l'œil chevauche à travers la jointure.
Portée : créée par le worker à l'intérieur d'une composition multi-battements (couches .beat superposées plein cadre), PAS un type registre/injecteur — il anime des plages de mots, pas des wrappers de clip. La frontière d'entrée et de sortie du bloc de battements de texte reçoit toujours une transition de registre normale. Ne compte pas dans le budget de 2–3 transitions.
| Paramètre | Valeur | Pourquoi |
|---|---|---|
| Déplacement | ±230 px (~12 % du cadre) | déplacement partiel + vélocité > poussée plein cadre |
| Sortie | 0,34 s power4.in | l'accélération EST la coupure |
| Fondu de sortie | 0,18 s, commence avec x | mot disparu à ~25–30 % du déplacement — pas de traînée |
| Décalage de sortie | +0,022 s dans l'ordre de lecture | la ligne se décolle, pas un glissement en bloc |
| Entrée | 0,3 s power4.out | moitié arrière du composite — adaptation de vélocité |
| Opacité de début entrée | 0.35 | allumage à mi-parcours ; binaire 0→1 claque |
| Écarts d'entrée | 0,05 s × décroissance 0.84 | cascade accélérée, se résout en composition |
Règles :
- Une direction par chaîne, chevauchant le courant. Le zoom arrière inverse est le battement ARRIVÉE de la chaîne uniquement.
- Pré-positionnez tous les mots à
x: +230, opacity: 0au moment de la construction —immediateRender: falseseul laisse les mots non démarrés visibles au repos. - Un premier battement court peut sortir en ligne entière : son fonde se termine ~0,02 s avant la coupure pour qu'il file encore quand les mots suivants s'allument — pas d'intervalle mort.
- Transform/opacité uniquement (sûr pour la recherche) ; sol de scène opaque s'applique.
5. Flou de mise au point (la coupure visible)
La variante où la coupure est VUE : un PIC de flou de défocalisation cache un échange dur d'une seule image — un effet de mise au point DSLR tenu à la main. Utilisez-le comme un ornement occasionnel pour un échange d'état de la MÊME surface dans un thème visuel ; jamais la frontière par défaut.
Différences avec les autres : la sortie reste ENTIÈREMENT OPAQUE jusqu'à la coupure (le flou cache l'échange — pas de fonde précoce) ; easings power2.in / power2.out (optique douce, pas d'élan).
Règles :
- Déclenchez seulement à un battement narratif, ≤ une fois par ~8 s ; jamais en milieu de légende ou pendant un maintien.
- Coupez au flou MAXIMAL (≥6 px ; pic 8–12 px, max ≤16–18 px) — échanger en montant montre la coupure.
- Une échelle subtile (~1,06 « respiration » d'objectif) le vend comme optique.
- Même direction des deux côtés — la loi vectorielle tient toujours. Durée d'entrée ≥ durée de sortie.
- Floutez le wrapper ; ne floutez jamais + opacité dans un seul tween sur un seul élément (bug de composition sans tête) ; ne floutez jamais une
<video>directement (emballez-la).
6. Entrée en cascade (arrivée intra-scène — pas une jointure)
Cascade d'ARRIVÉE échelonnée : mots/éléments arrivent en fouettant par le bas (une direction cohérente), chacun commençant avant que le précédent ne se stabilise — une vague accélérée qui se résout en une disposition composée. Cartes-titres, ouvreurs de segments, intros de listes/fonctionnalités. Le frère de jointure est §4 ; ne mélangez pas leurs règles :
| §6 Entrée (arrivée) | §4 Coupure en cascade (jointure) | |
|---|---|---|
| Opacité | BINAIRE 0→1 via tl.set à l'entrée — jamais de fondu | s'allume à 0.35 à mi-parcours — le fondu EST l'astuce de vélocité |
| Axe par défaut | Y, par le bas | X, chevauchant le courant |
| Côté sortant | aucun | les mots s'éloignent avec power4.in miroir |
Chorégraphie :
- Chevauchez, ne mettez pas en file d'attente — l'élément suivant commence à ±2 images de la stabilisation du précédent ; les écarts RÉTRÉCISSENT dans la cascade ; le dernier élément claque.
- La vélocité varie selon le poids — les éléments lourds/ancre voyagent plus loin et plus longtemps ; les mots légers/ponctuation arrivent vite et serré :
| Paramètre | Ancre/lourd | Mot normal | Léger/ponctuation |
|---|---|---|---|
| Décalage Y | 60–80 px | 40–50 px | 30–48 px |
| Durée | 0,16–0,20 s | 0,13–0,16 s | 0,10–0,13 s |
| Chevauchement | écart 0–2 i | chevauchement 1 i | chevauchement 1–2 i |
- Ease
power4.out(expo.out pour plus de claquement) ; jamais.inOutsur une entrée. - Une direction par cascade.
- Divisez le DERNIER mot en fragments pour prolonger le point culminant ; les fragments voyagent plus loin.
- Après stabilisation, le groupe glisse généralement pour faire de la place pour le battement suivant — c'est §7.
7. Courbe de nudging (glissement de groupe intra-scène — pas une jointure)
Repositionnement lent-rapide-lent d'un groupe composé (lignes de mots, piles de cartes, listes) pour révéler du contenu ou faire de la place. Aucun ease intégré ne le produit — power4.inOut s'arrête net. Enchaînez trois tweens sur une propriété :
| Phase | Ease | Distance | Temps | Sensation |
|---|---|---|---|---|
| 1 montée en puissance | power3.in | ~10 % | ~20 % | bouge à peine — le mouvement s'enregistre, pas de secousse |
| 2 éclatement | none (linéaire) | ~65 % | ~18 % | ~2× px/image moyen — déterminé |
| 3 traînée | power4.out | ~25 % | ~62 % | rampe décroissante jusqu'à l'arrêt — tue le claquement |
Règles :
- La traînée est ≥3× la montée en puissance en TEMPS. Si elle claque encore : étendez le temps de la traînée (pas la distance) ou utilisez
power5.out. - La phase 2 reste linéaire — l'ajuster avec un ease perd le contraste de l'éclatement.
- Révélez du nouveau contenu PENDANT la phase 2 — l'éclatement masque son apparition.
- Mêmes ratios en vertical ; mettez à l'échelle la distance proportionnellement, gardez les ratios de temps.
Choisir une variante
| Zoom avant | Zoom arrière inverse | Cut the Curve | Coupure en cascade | |
|---|---|---|---|---|
| Portée | Échange de texte intra-scène | Battement arrivée/récompense | Entre scènes | Jointure texte-texte |
| Signe Z / axe | Croissante (poussée) | Décroissante (tirage) | X / Y | X, par mot |
| Déplacement/échelle | 1→1.2, puis 0.75→1 | 1→0.8, puis 1.25→1 | ±230 px | ±230 px |
| Flou maximal | 10 px texte / 18–20 plein cadre | 10 px texte / 18–20 plein cadre | 8–10 px optionnel | aucun |
| Easings | power3.in / expo.out | power3.in / expo.out | power4.in / power4.out | power4.in / power4.out |
| Sensation | progression à travers | arrivée à | porté latéralement | une vague à travers la jointure |
Anti-patrons
| Ne faites pas | Problème | Faites à la place |
|---|---|---|
| Départ de sortie à opacité < 1 | La coupure montre un espace semi-transparent | Gardez l'opacité de sortie à 1 jusqu'à la coupure ; utilisez un fondu sur un wrapper ou un calque séparé |
| Flou + opacité dans le même tween sur un seul élément | Bug de composition sans tête — l'opacité se multiplie étrangement pendant le flou | Séparez : flou sur le wrapper, opacité sur l'élément ou sur une mince couche de fondu |
Flou sur <video> directement | Le navigateur applique le flou au niveau de la surface, pas par pixels | Emballez la vidéo dans une <div> et floutez le wrapper |
| Durée d'entrée < durée de sortie | La décélération se sent interrompue — la coupure lit comme une butée | La durée d'entrée ≥ sortie ; la moitié arrière de la courbe de vélocité doit se dérouler complètement |
Utiliser power4.inOut pour la courbe de nudging | Le « smack » d'arrêt détruit le flux | Chaîne de trois phases §7 ; n'utilisez jamais un seul ease composite |
| Ajuster la phase 2 de l'éclatement (§7) avec un ease | Perd le contraste entre la baisse lente et la baisse rapide | Gardez none (linéaire) ; ajustez le temps si nécessaire |
| Coupure en cascade sur un seul mot | La vague mot-par-mot nécessite au moins 4 mots, de préférence 6+ pour le flux | Utilisez Cut the Curve normal pour les phrases courtes |
| Plusieurs directions dans une cascade | L'œil se perd sur le changement de direction | Une direction par chaîne ; faites tourner sur le bord si le prochain mouvement est dans une autre direction |
| Inverse zoom sur des frontières ordinaires | L'effet de grand arrivant est trop gros pour les transitions normales | Réservez pour les battements d'arrivée — la première ligne d'un nouveau segment, une réponse géante, un état final |
| Coupure en cascade sortante avec opacité 1 tout au long | Les mots fondent et laissent des traces | Fondu à ~25–30 % du déplacement — l'opacité restante se termine avant la coupure |
| Entrée en cascade avec fondu | L'opacité binaire 0→1 claque le timing — le fondu laisse les mots traîner, brisant le rythme de cascade | Entrée via tl.set à opacité 0 et from à opacité 1 au début — le mouvement apporte le temps, pas le fondu |
Références
| Sujet | Où |
|---|---|
| Documentation Seam Gate et loi vectorielle | motion-doctrine — tout le catalogue suppose que vous avez lu la loi |
| Code worker + registre GSAP | examples/gsap-implementation.md |
| Exemples concrets (vidéos de référence) | voir examples/ |
| Dépannage des coupures de scène | seam-craft — débogage du sol de scène, des fenêtres de coupure |
| Gouvernance du budget de transition | transition-budget — quand compter et quand ne pas compter une variation de jointure |