Cut the Curve – der Technikkatalog
Fünf SEAM-Techniken, ein Prinzip: Schneide bei Spitzengeschwindigkeit, gleiche Richtung und Geschwindigkeit auf beiden Seiten des Schnitts – plus zwei In-Szene-Techniken (§6 Eintritte, §7 Rutschen). Das Naht-Gesetz – Vektorgesetz, der Strom, das Hauptbuch, das Naht-Tor – befindet sich in motion-doctrine; lies es zuerst. Diese Fähigkeit enthält die Parameter und die Mechanik. Alle GSAP-Codevorlagen (Worker + Registry): examples/gsap-implementation.md.
Katalog
| # | Technik | Geltungsbereich | Achse | Verwendung für |
|---|---|---|---|---|
| 1 | Zoom-Through (vorwärts) | Szeneninterner Textwechsel | Z, zum Betrachter hin | tiefer in denselben Gedanken vordringen |
| 2 | Inverser Zoom-Through | Eintritts-/Abschluss-Beat | Z, vom Betrachter weg | etwas Größeres trifft ein |
| 3 | Cut the Curve | Zwischen Szenen | X / Y | die Standardgrenze, der Strom des Films |
| 4 | Waterfall Cut | Text-zu-Text-Naht | X, pro Wort | Wortebenen-Übergabe zwischen großen Text-Beats |
| 5 | Rack-Focus Blur-Cut | Zustandswechsel auf gleicher Oberfläche | X / Y / Z | der eine Schnitt, der GESEHEN werden soll – eine DSLR-Fokus-Pull-Flourish |
| 6 | Waterfall Entry | Szeneninterner EINTRITT (keine Naht) | Y, von unten | Titelcards, Segment-Opener, Listeneinführungen |
| 7 | Nudge Curve | Szeneninterner Gruppen-Slide (keine Naht) | X / Y | Neupositionierung einer komponierten Gruppe, um Platz zu schaffen |
Z-Richtung ist ein Vorzeichen
„Gleiche Achse“ reicht auf Z nicht aus – das Vorzeichen von d(Skalierung)/dt muss auf beiden Seiten des Schnitts übereinstimmen:
| Z-Vektor | Ausgangsskalierung | Eingangsskalierung | Variante |
|---|---|---|---|
| Schub (vorwärts) | wachsend 1 → 1,2 | wachsend 0,75 → 1 | Zoom-Through |
| Zug (rückwärts) | schrumpfend 1 → 0,8 | schrumpfend 1,25 → 1 | Inverser Zoom-Through |
Verbotene Spiegelungen: ein zurückweichender Ausgang, beantwortet von einem Eintritt, der von klein wächst (Zug kippt zu Schub – der häufige Fall, da „von klein wachsen“ der Standard-Elementeintritt ist), und ein Schub-Ausgang, beantwortet von einer übergroßen Retraktion. Dies bindet die EIGENEN Eintritte der eingehenden Szene während des Nahtfensters (Schnitt + ~0,5s), nicht nur den Wrapper-Tween: halte den eingehenden Frame komponiert oder erstelle seinen Eintritt so, dass er das Vorzeichen erfüllt. Überprüfe pro Naht-Tor-Regel 7.
Unschärfe-Logik (alle Z-Varianten)
| Subjekt | Spitzenunschärfe | Begründung |
|---|---|---|
| Textskalierung (Überschrift, Wortgruppe) | 10px | 20px verschmiert Buchstabenformen – der Schnitt wirkt wie ein Glitch, nicht wie Geschwindigkeit |
| Vollbild-Oberfläche (Fenster, Karte, Screenshot) | 18–20px | Leichtere Unschärfe auf einer großen Oberfläche wirkt wie ein Rendering-Hickser |
Gleiche Spitzenunschärfe auf beiden Seiten am Austausch-Frame. Verwische den WRAPPER, niemals die Kinder.
1. Zoom-Through (vorwärts)
Z-Achsen-geschwindigkeitsangepasster Schnitt; niemals beide Texte sichtbar. Alles WÄCHST: Der ausgehende Text beschleunigt auf die Kamera zu, ein harter Wechsel versteckt sich bei Spitzenunschärfe, der eingehende Text wächst weiter in die Fokusebene hinein. Nur Überschriften und kurze Phrasen. Gesamt ≈ 0,4s.
| Phase | Skalierung | Unschärfe | Deckkraft | Ease | Dauer |
|---|---|---|---|---|---|
| Ausgang | 1 → 1,2 | 0 → 10px | 1 → 0,15 | power3.in (Deckkraft: separater none-Tween) | 0,2s |
Schnitt (tl.set) | ein: 0,75 | 10px | aus: 0 / ein: 0,15 | — | — |
| Eingang | 0,75 → 1 | 10 → 0px | 0,15 → 1 | expo.out | 0,5s |
Die Ausgangs-Deckkraft MUSS ein eigener linearer Tween sein – power3.in hält die Deckkraft zu lange nahe 1. Beim Eingang teilen sich alle Eigenschaften expo.out.
2. Inverser Zoom-Through (rückwärts)
Der Rückwärts-Zoom-Spiegel: Das ausgehende Element WEICHT ZURÜCK; das eingehende kommt ÜBERGROSS (als ob es gerade hinter der Kamera wäre) und zieht sich in die Fokusebene zurück. Alles SCHRUMPFT. Verwende es für EINTRITTS-/Abschluss-Beats – einen Abschlusssatz, eine riesige Antwort, einen gehaltenen Endzustand – niemals für gewöhnliche Grenzen. Gesamt ≈ 0,7s (30% Ausgang / 70% Eingang).
| Phase | Skalierung | Unschärfe | Deckkraft | Ease | Dauer |
|---|---|---|---|---|---|
| Ausgang | 1 → 0,8 | 0 → 10px | 1 → 0,15 | power3.in (Deckkraft: separater none-Tween) | ~0,2s |
Schnitt (tl.set) | ein: 1,25 | 10px | aus: 0 / ein: 0,15 | — | — |
| Eingang | 1,25 → 1 | 10 → 0px | 0,15 → 1 | expo.out | ~0,5s |
Unschärfe beträgt 10px für Textskalierung; 18–20px nur, wenn beide Seiten randlose Oberflächen sind.
Vorzeichendisziplin: Die eingehende Szene trifft als komponierter Frame im sich zurückziehenden Wrapper ein – kein „von klein wachsen“-Intro im Nahtfenster. Gestaffelte Eintritte erfolgen nachdem sich die Retraktion gesetzt hat, oder starten ≥1 und ziehen sich zurück.
3. Cut the Curve (Standard-Szenengrenze)
X/Y-geschwindigkeitsangepasster Schnitt – der Standard für ALLE Szenen-zu-Szenen-Grenzen, im Strom des Films, nicht als Akzent. Der ausgehende Held beschleunigt in eine Richtung, der Schnitt landet in der Mitte der Bewegung, der eingehende Held setzt die GLEICHE Richtung fort und verlangsamt. Gesamt ≈ 0,6s; Richtungen LINKS / RECHTS / OBEN / UNTEN (Standard LINKS).
Partielle Bewegung: ~12% des Bildausschnitts (≈230px bei 1920) – niemals vollständige Bildschirm-aus-Bewegungen.
| Richtung | Ausgang | Eingangsstart → Ende |
|---|---|---|
| Nach links | x: 0 → −230 | x: +230 → 0 |
| Nach rechts | x: 0 → +230 | x: −230 → 0 |
| Nach oben | y: 0 → −230 | y: +230 → 0 |
| Nach unten | y: 0 → +230 | y: −230 → 0 |
Mechanik:
- Gespiegelte Eases: Ausgang
power4.in+ Eingangpower4.out, gleiche Distanz und Dauer – die beiden Hälften einespower4.inOut, sodass die Geschwindigkeit am Schnitt exakt übereinstimmt. - Der Ausblend-Trick: Die Ausgangsdeckkraft ist bei ~25–30% der Bewegung abgeschlossen (Ausblendung ≈ 0,18–0,3s vs. Bewegung 0,3–0,34s); der Eingang beginnt bei ~0,35 Deckkraft mitten im Pfad. Timing: Das letzte ausblendende Element stirbt genau am Schnitt – eine Lücke, in der sich nichts bewegt, wirkt wie tote Luft.
- Ausgang 0,2–0,4s; Eingang ≥ Ausgang. Optionale Unschärfe 8–10px.
- Bühnenhintergrund:
#rootmuss undurchsichtig sein (background: var(--canvas-deep, var(--canvas, #000))) – der mittlere Fensterschnitt öffnet ein summierte-Deckkraft-<1-Fenster, das ansonsten weiß aufblitzt (sieheseam-craft).
push-slide existiert, verletzt aber die partielle Bewegung und die mittlere Bewegungsphase; bevorzuge cut-the-curve.
4. Waterfall Cut (wortweiser Cut the Curve)
Cut-the-Curve auf WORT-Ebene – der stärkste Links-Schnitt für Text-zu-Text-Nähte. Ausgehende Wörter gleiten auf ihren eigenen Kurven aus; eingehende Wörter kaskadieren im Flug – eine Welle, die das Auge über die Naht trägt.
Geltungsbereich: Vom Worker in einer Multi-Beat-Komposition (gestapelte Vollbild-.beat-Ebenen) erstellt, KEIN Registry/Injector-Typ – es tweent Wort-Spannen, nicht Clip-Wrapper. Die Grenze in und aus dem Text-Beat-Block erhält immer noch einen normalen Registry-Übergang. Zählt nicht gegen das 2–3-Übergangsbudget.
| Parameter | Wert | Begründung |
|---|---|---|
| Bewegung | ±230px (~12% Frame) | Partielle Bewegung + Geschwindigkeit > Vollbild-Schub |
| Ausgang | 0,34s power4.in | Die Beschleunigung IST der Schnitt |
| Ausgangsausblendung | 0,18s, beginnt mit x | Wort weg nach ~25–30% der Bewegung – kein Schmier |
| Ausgangsstaffelung | +0,022s Lesereihenfolge | Die Zeile schält sich, kein Block-Slide |
| Eingang | 0,3s power4.out | Hintere Hälfte der Composite – Geschwindigkeitsanpassung |
| Eingangsstart-Deckkraft | 0,35 | Zündung mitten im Pfad; binär 0→1 knallt |
| Eingangslücken | 0,05s × 0,84 Abklingen | Beschleunigende Kaskade, löst sich komponiert auf |
Regeln:
- Eine Richtung pro Kette, den Strom reitend. Inverser Zoom ist nur der EINTRITTS-Beat der Kette.
- Setze alle Wörter beim Erstellen auf
x: +230, opacity: 0–immediateRender: falseallein lässt nicht gestartete Wörter im Ruhezustand sichtbar. - Ein kurzer erster Beat kann die gesamte Zeile beenden: seine Ausblendung endet ~0,02s vor dem Schnitt, sodass er noch streakt, wenn die nächsten Wörter zünden – keine tote Lücke.
- Nur Transform/Deckkraft (suchsicher); undurchsichtiger Bühnenhintergrund gilt.
5. Rack-Focus Blur-Cut (der sichtbare Schnitt)
Die eine Variante, bei der der Schnitt GESEHEN wird: Ein Defokus-Unschärfe-SPIKE versteckt einen harten Einzel-Frame-Wechsel – ein Handheld-DSLR-Fokus-Pull. Verwende es als gelegentliche Verzierung für einen Zustandswechsel der GLEICHEN Oberfläche innerhalb eines visuellen Themas; niemals als Standardgrenze.
Unterschiede zu den anderen: Der Ausgang bleibt VOLLSTÄNDIG DECKEND bis zum Schnitt (die Unschärfe versteckt den Wechsel – keine frühe Ausblendung); Eases power2.in / power2.out (weiche Optik, kein Schwung).
Regeln:
- Nur bei einem narrativen Beat auslösen, ≤ einmal pro ~8s; niemals während einer Bildunterschrift oder während einer Halteposition.
- Schneide bei SPITZENUNSCHÄRFE (≥6px; Spitze 8–12px, ≤16–18px max) – ein Wechsel auf dem Weg nach oben zeigt den Schnitt.
- Eine subtile Skalierung (~1,06 Linsenatmung) verkauft es als Optik.
- Gleiche Richtung auf beiden Seiten – das Vektorgesetz gilt weiterhin. Eingang ≥ Ausgangsdauer.
- Verwische den Wrapper; verwische niemals Unschärfe + Deckkraft in einem Tween auf einem Element (kopfloser Compositing-Fehler); verwische niemals direkt ein
<video>(wickle es ein).
6. Waterfall Entry (szeneninterner Eintritt – keine Naht)
Gestaffelte EINTRITTS-Kaskade: Wörter/Elemente sausen von unten herein (eine konsistente Richtung), jedes beginnt, bevor das vorherige zur Ruhe kommt – eine beschleunigende Welle, die sich in einem komponierten Layout auflöst. Titelcards, Segment-Opener, Listen-/Feature-Intros. Das Naht-Gegenstück ist §4; mische ihre Regeln nicht:
| §6 Eintritt (Ankunft) | §4 Waterfall Cut (Naht) | |
|---|---|---|
| Deckkraft | BINÄR 0→1 via tl.set beim Eintritt – niemals ausblenden | Zündet bei 0,35 mitten im Pfad – die Ausblendung IST der Geschwindigkeitstrick |
| Achsenstandard | Y, von unten | X, den Strom reitend |
| Ausgangsseite | keine | Wörter gleiten auf gespiegeltem power4.in aus |
Choreografie:
- Überlappen, nicht in die Warteschlange stellen – das nächste Element beginnt innerhalb von ±2 Frames nachdem sich das vorherige gesetzt hat; Lücken SCHRUMPFEN über die Kaskade hinweg; das letzte Element schnappt ein.
- Geschwindigkeit variiert nach Gewicht – schwere/Anker-Elemente bewegen sich weiter und länger; leichte Wörter/Satzzeichen schnappen eng ein:
| Parameter | Anker/schwer | Normales Wort | Leicht/Satzzeichen |
|---|---|---|---|
| Y-Versatz | 60–80px | 40–50px | 30–48px |
| Dauer | 0,16–0,20s | 0,13–0,16s | 0,10–0,13s |
| Überlapp | 0–2f Lücke | 1f Überlapp | 1–2f Überlapp |
- Ease
power4.out(expo.out für extra Schnapp); niemals.inOutbei einem Eintritt. - Eine Richtung pro Kaskade.
- Teile das LETZTE Wort zur Verlängerung des Höhepunkts in Fragmente; Fragmente bewegen sich weiter.
- Nach dem Setzen rutscht die Gruppe normalerweise, um Platz für den nächsten Beat zu schaffen – das ist §7.
7. Nudge Curve (szeneninterner Gruppen-Slide – keine Naht)
Langsam-schnell-langsame Neupositionierung einer komponierten Gruppe (Wortzeilen, Kartenstapel, Listen), um Inhalt zu enthüllen oder Platz zu schaffen. Kein einzelner eingebauter Ease erzeugt sie – power4.inOut knallt zu einem Stopp. Verkette drei Tweens an einer Eigenschaft:
| Phase | Ease | Distanz | Zeit | Gefühl |
|---|---|---|---|---|
| 1 Einlauf | power3.in | ~10% | ~20% | bewegt sich kaum – Bewegung registriert, kein Ruck |
| 2 Ausbruch | none (linear) | ~65% | ~18% | ~2× durchschnittlich px/Frame – zielgerichtet |
| 3 Nachlauf | power4.out | ~25% | ~62% | abklingendes Kriechen zur Ruhe – tötet den Knall |
Regeln:
- Der Nachlauf ist ≥3× der Einlaufzeit. Wenn es immer noch knallt: verlängere die Zeit des Nachlaufs (nicht die Distanz) oder verwende
power5.out. - Phase 2 bleibt linear – ein Easing verlöre den Ausbruchskontrast.
- Enthülle neuen Inhalt WÄHREND Phase 2 – der Ausbruch maskiert sein Erscheinen.
- Gleiche Verhältnisse vertikal; skaliere Distanzen proportional, behalte die Zeitverhältnisse bei.
Auswahl einer Variante
| Zoom-Through | Inverser Zoom | Cut the Curve | Waterfall Cut | |
|---|---|---|---|---|
| Geltungsbereich | Szeneninterner Textwechsel | Eintritts-/Abschluss-Beat | Zwischen Szenen | Text-zu-Text-Naht |
| Z-Vorzeichen / Achse | wachsend (Schub) | schrumpfend (Zug) | X / Y | X, pro Wort |
| Bewegung/Skalierung | 1→1,2, dann 0,75→1 | 1→0,8, dann 1,25→1 | ±230px | ±230px |
| Spitzenunschärfe | 10px Text / 18–20 Vollbild | 10px Text / 18–20 Vollbild | 8–10px optional | keine |
| Eases | power3.in / expo.out | power3.in / expo.out | power4.in / power4.out | power4.in / power4.out |
| Gefühl | Fortschreiten durch | Ankommen bei | Seitwärts getragen | Eine Welle über die Naht |
Anti-Patterns
| Mach nicht | Stattdessen |
|---|---|
| Beide Seiten gleich lange Eases (z. B. power1.in + power1.out) – die Geschwindigkeiten sind am Schnitt nicht identisch, der Übergang liest sich wie ein Mismatch | Gespiegelte Eases (power4.in / power4.out oder power3.in / expo.out) |
| Ausblendung auf Mach-Ebene am Schnitt beenden – der Frame wird schwarz, bis der Eingang zündet | Beende die Ausblendung bei ~25–30% der Bewegung; der Eingang zündet bei 0,35 Deckkraft mitten im Pfad |
Verwische Kinder direkt (Wort-Spans, <p>, <video>) – bricht das Compositing in headless Renderern | Verwische den Wrapper; wickle <video> für die Unschärfe ein |
| Überschreite das ~12%-Bewegungslimit – volle Bildschirm-aus-Bewegungen bei voller Geschwindigkeit sehen aus wie ein Spielfilm-Schwenk, kein narratives Werkzeug | Begrenze die Bewegung auf ±230px bei 1920; skaliere proportional für andere Auflösungen |
| Verwende Zoom-Through als Szenengrenze oder Cut-the-Curve für szeneninterne Textwechsel | Wähle die Variante basierend auf der Geltungsbereich-Spalte |
Verlasse dich auf immediateRender: false, um Wörter zu verstecken – sie sind vor dem ersten Render sichtbar | Setze sie beim Erstellen auf x: +230, opacity: 0 |
| Verwische + Deckkraft in einem Tween auf demselben Element – Ghosting in headless Umgebungen | Trenne sie in separate Tweens oder Ebenen |
Wende eine Unschärfe auf ein <video> an, ohne es zu wrappen – die Unschärfe wird in headless Compositing ignoriert | Wickle es in eine div oder span und verwische den Wrapper |
| Verwende eine Einlass-Animation (von klein wachsen oder von unten einfahren) während des Nahtfensters eines inversen Zooms – unterbricht die Vorzeichendisziplin | Halte die Retraktion; gestaffelte Eintritte nach der Setzung, oder starte Skalierung ≥1 |
Referenzmaterial
- Wörterbuch der Bewegungslehre (
motion-doctrine/glossary.md): Definitionen für Geschwindigkeitsanpassung, Naht, Strom, Vektorgesetz, Fokusebene, Schwebung, Partial-Travel, Kaskade, Staffelung - Naht-Handwerk (
seam-craft): Ausführliche Behandlung des Naht-Tors, Regeln 1–12, Gesamtübergangsbudget, Push-Slide vs. Cut-the-Curve - Worker-Richtlinien (
worker-guidelines): Wie man einen Beat für jede Technik erstellt, Registry-Eintrag, GSAP-Timing-Tricks - Kompendium der kinetischen Textarbeit (
kinetic-text): 4-Phasen-Pipelining (Setup → Choreografie → Animation → Bereinigung), Texthierarchie - GSAP-Implementierung (
examples/gsap-implementation.md): Vollständige GSAP-Codevorlagen pro Technik (Worker + Registry-Eintrag)