Was macht Cut the Curve – Der Technikkatalog?
Fünf SEAM-Techniken, ein Prinzip: Schneide bei Spitzengeschwindigkeit, passe Richtung und Geschwindigkeit auf beiden Seiten des Schnitts an – plus zwei In-Szenen-Techniken (§6 Ankünfte, §7 Schieber).
Das SEAM-Gesetz – Vektorgesetz, der Strom, das Hauptbuch, das SEAM-Tor – befindet sich in motion-doctrine; lies es zuerst. Dieses Skill enthält die Parameter und Mechaniken.
Alle GSAP-Codevorlagen (Worker + Registry): examples/gsap-implementation.md.
Katalog
| # | Technik | Anwendungsbereich | Achse | Verwendung für |
|---|---|---|---|---|
| 1 | Durch-Zoom (vorwärts) | Szeneninterner Textwechsel | Z, zum Betrachter | Fortschreiten in denselben Gedanken |
| 2 | Inverser Durch-Zoom | Ankunfts-/Höhepunkt-Beat | Z, vom Betrachter | Etwas Größeres landet |
| 3 | Kurvenschnitt | Zwischen Szenen | X / Y | Der Standard-Übergang, der Filmstrom |
| 4 | Wasserfall-Schnitt | Text-zu-Text-Übergang | X, pro Wort | Wortweiser Übergang zwischen großen Text-Beats |
| 5 | Unschärfe-Schnitt | Zustandswechsel gleicher Ebene | X / Y / Z | Der eine Schnitt, der GESEHEN werden soll – DSLR-Fokus |
| 6 | Wasserfall-Eingang | Szeneninterne ANKUNFT (kein Übergang) | Y, von unten | Titel, Segment-Öffner, Listeneinführungen |
| 7 | Schiebekurve | Szeneninterne Gruppenverschiebung (kein Übergang) | 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(Skala)/dt muss auf beiden Seiten des Schnitts übereinstimmen:
| Z-Vektor | Ausgangsskala | Eingangsskala | Variante |
|---|---|---|---|
| Schub (vorwärts) | wachsend 1 → 1.2 | wachsend 0.75 → 1 | Durch-Zoom |
| Zug (rückwärts) | schrumpfend 1 → 0.8 | schrumpfend 1.25 → 1 | Inverser Durch-Zoom |
Verbotene Spiegelungen: Ein zurückweichender Ausgang, beantwortet von einem aus dem Kleinen wachsenden Eingang (Zug kippt zu Schub – der häufige Fall, da „aus dem Kleinen wachsen“ der Standard-Elementeingang ist), und ein Schub-Ausgang, beantwortet von einem überdimensionierten Rückzug. Dies bindet die EIGENEN Eingänge der eingehenden Szene während des SEAM-Fensters (Schnitt + ~0.5s), nicht nur den Wrapper-Tween: Halte den eingehenden Frame komponiert oder authoriere seinen Eingang passend zum Vorzeichen. Überprüfe gemäß SEAM-Tor-Regel 7.
Unschärfe-Logik (alle Z-Varianten)
| Subjekt | Spitzen-Unschärfe | Warum |
|---|---|---|
| Text-Skala (Überschrift, Wortgruppe) | 10px | 20px verschmiert Buchstaben – der Schnitt wirkt wie ein Glitch, nicht Geschwindigkeit |
| Vollbild-Oberfläche (Fenster, Karte, Screenshot) | 18–20px | Leichtere Unschärfe auf einer großen Fläche wirkt wie ein Render-Fehler |
Gleiche Spitzen-Unschärfe auf beiden Seiten am Wechselframe. Unschärfe am WRAPPER, niemals an Kindern.
1. Durch-Zoom (vorwärts)
Geschwindigkeitsangepasster Schnitt auf der Z-Achse; niemals beide Texte sichtbar. Alles WÄCHST: Der ausgehende Text beschleunigt auf die Kamera zu, ein harter Wechsel versteckt sich bei Spitzen-Unschärfe, der eingehende Text wächst weiter in die Fokusebene. Nur Überschriften und kurze Phrasen. Gesamt ≈ 0,4s.
| Phase | Skala | Unschärfe | Deckkraft | Beschleunigung | 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 Durch-Zoom (rückwärts)
Der Rückzugs-Spiegel: Das ausgehende Element WEICHT ZURÜCK; das eingehende kommt ÜBERGROSS (als ob es direkt hinter der Kamera wäre) und zieht sich in die Fokusebene zurück. Alles SCHRUMPFT. Verwende es für ANKUNFTS-/Höhepunkts-Beats – eine Höhepunktzeile, eine riesige Antwort, einen gehaltenen Endzustand – niemals für gewöhnliche Übergänge. Gesamt ≈ 0,7s (30% Ausgang / 70% Eingang).
| Phase | Skala | Unschärfe | Deckkraft | Beschleunigung | 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 ist 10px bei Text-Skala; 18–20px nur, wenn beide Seiten randlose Oberflächen sind.
Vorzeichen-Disziplin: Die eingehende Szene kommt als komponierter Frame innerhalb des sich zurückziehenden Wrappers an – kein „aus dem Kleinen wachsen“-Intro im SEAM-Fenster. Gestaffelte Eingänge erfolgen nachdem der Rückzug abgeschlossen ist, oder beginnen bei ≥1 und ziehen sich zurück.
3. Kurvenschnitt (Standard-Szenen-Übergang)
Geschwindigkeitsangepasster Schnitt auf X/Y – der Standard für ALLE Szenen-zu-Szenen-Übergänge, im Filmstrom, kein Akzent. Der ausgehende Held beschleunigt in eine Richtung, der Schnitt landet mitten in der Bewegung, der eingehende Held setzt in der GLEICHEN Richtung fort und verlangsamt. Gesamt ≈ 0,6s; Richtungen LINKS / RECHTS / OBEN / UNTEN (Standard LINKS).
Teilbewegung: ~12% des Bildes (≈230px bei 1920) – niemals vollständige Bildschirmabgänge.
| 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 |
Mechaniken:
- Gespiegelte Beschleunigungen: Ausgang
power4.in+ Eingangpower4.out, gleiche Distanz und Dauer – die beiden Hälften einespower4.inOut, sodass die Geschwindigkeit exakt am Schnitt übereinstimmt. - Der Ausblend-Trick: Die Ausgangs-Deckkraft endet bei etwa 25–30% der Bewegung (Ausblendung ≈ 0,18–0,3s vs. Bewegung 0,3–0,34s); der Eingang zündet bei etwa 0,35 Deckkraft mittendrin. Timing: Das letzte ausblendende Element stirbt genau am Schnitt – eine Lücke, in der nichts läuft, 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 Schnitt in der Mitte öffnet ein Fenster mit summierter Deckkraft < 1, das sonst weiß aufblitzt (sieheseam-craft).
push-slide existiert, verletzt aber Teilbewegung und die Phase der Bewegung; bevorzuge Kurvenschnitt.
4. Wasserfall-Schnitt (wortweiser Kurvenschnitt)
Kurvenschnitt auf WORT-Ebene – der stärkste Links-Schnitt für Text-zu-Text-Übergänge. Ausgehende Wörter gleiten auf eigenen Kurven aus; eingehende Wörter kaskadieren im Flug hinein – eine Welle, die das Auge über den Übergang reitet.
Anwendungsbereich: Worker-authoriert innerhalb einer Multi-Beat-Komposition (gestapelte vollbild .beat-Layer), KEINE Registry/Injector-Type – es bewegt Wort-Spannen, keine Clip-Wrapper. Der Übergang in und aus dem Text-Beat-Block erhält weiterhin einen normalen Registry-Übergang. Zählt nicht gegen das Budget von 2–3 Übergängen.
| Parameter | Wert | Warum |
|---|---|---|
| Bewegung | ±230px (~12% Bild) | Teilbewegung + Geschwindigkeit > Vollbild-Schub |
| Ausgang | 0,34s power4.in | Die Beschleunigung IST der Schnitt |
| Ausgangs-Ausblendung | 0,18s, beginnt mit x | Wort verschwindet bei ~25–30% der Bewegung – kein Schlieren |
| Ausgangs-Staffelung | +0,022s Lesereihenfolge | Die Zeile schält sich, keine Blockverschiebung |
| Eingang | 0,3s power4.out | Hintere Hälfte des Verbunds – Geschwindigkeitsanpassung |
| Eingangs-Startdeckkraft | 0,35 | Mittendrin-Zündung; binäres 0→1 wirkt plump |
| Eingangs-Lücken | 0,05s × 0,84 Zerfall | Beschleunigende Kaskade, löst sich komponiert auf |
Regeln:
- Eine Richtung pro Kette, dem Strom folgend. Inverser Zoom ist nur der ANKUNFTS-Beat der Kette.
- Setze alle Wörter zur Build-Zeit auf
x: +230, opacity: 0–immediateRender: falseallein lässt ungestartete Wörter in Ruhe sichtbar. - Ein kurzer erster Beat kann als ganze Zeile auslaufen: seine Ausblendung endet ~0,02s vor dem Schnitt, sodass er noch zieht, wenn die nächsten Wörter zünden – keine tote Lücke.
- Nur Transform/Deckkraft (suchsicher); undurchsichtiger Bühnenhintergrund gilt.
5. Unschärfe-Schnitt (der sichtbare Schnitt)
Die eine Variante, bei der der Schnitt GESEHEN wird: Ein Unschärfe-AUSBRUCH versteckt einen harten Einzelbild-Wechsel – ein DSLR-Fokus-Pull. Verwende es als gelegentlichen Effekt für einen Zustandswechsel der GLEICHEN Oberfläche innerhalb eines visuellen Themas; niemals der Standard-Übergang.
Unterschiede zu den anderen: Der Ausgang bleibt BIS zum Schnitt VOLLSTÄNDIG DECKEND (die Unschärfe versteckt den Wechsel – keine frühe Ausblendung); Beschleunigungen 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 einer Haltephase.
- Schneide bei SPITZEN-Unschä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. Eingangsdauer ≥ Ausgangsdauer.
- Unschärfe am Wrapper; niemals Unschärfe + Deckkraft in einem Tween auf einem Element (kopfloser Compositing-Bug); niemals ein
<video>direkt unscharf machen (wickle es ein).
6. Wasserfall-Eingang (szeneninterne Ankunft – kein Übergang)
Gestaffelte ANKUNFTS-Kaskade: Wörter/Elemente peitschen von unten herein (eine konsistente Richtung), jedes beginnt, bevor das vorherige zur Ruhe kommt – eine beschleunigende Welle, die sich in ein komponiertes Layout auflöst. Titel, Segment-Öffner, Listen-/Feature-Einführungen. Der Übergangs-Verwandte ist §4; vermische nicht ihre Regeln:
| §6 Eingang (Ankunft) | §4 Wasserfall-Schnitt (Übergang) | |
|---|---|---|
| Deckkraft | BINÄR 0→1 via tl.set beim Eingang – niemals ausblenden | Zündet bei 0,35 mittendrin – die Ausblendung IST der Geschwindigkeitstrick |
| Achsen-Standard | Y, von unten | X, dem Strom folgend |
| Ausgehende Seite | keine | Wörter gleiten auf gespiegeltem power4.in aus |
Choreografie:
- Überlappen, nicht in die Warteschlange stellen – nächstes Element beginnt innerhalb von ±2 Frames nachdem das vorherige zur Ruhe kommt; Lücken SCHRUMPFEN über die Kaskade; das letzte Element schnappt ein.
- Geschwindigkeit variiert nach Gewicht – schwere/Anker-Elemente reisen weiter und länger; leichte Wörter/Zeichensetzung schnappen eng ein:
| Parameter | Anker/schwer | Normales Wort | Leicht/Zeichensetzung |
|---|---|---|---|
| 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 |
- Beschleunigung
power4.out(expo.out für extra Schnapp); niemals.inOutbei einem Eingang. - Eine Richtung pro Kaskade.
- Teile das LETZTE Wort in Fragmente, um den Höhepunkt zu verlängern; Fragmente reisen weiter.
- Nach der Beruhigung schiebt sich die Gruppe normalerweise, um Platz für den nächsten Beat zu schaffen – das ist §7.
7. Schiebekurve (szeneninterne Gruppenverschiebung – kein Übergang)
Langsam-schnell-langsame Neupositionierung einer komponierten Gruppe (Wortzeilen, Kartenstapel, Listen), um Inhalt zu enthüllen oder Platz zu schaffen. Keine einzelne eingebaute Beschleunigung erzeugt sie – power4.inOut knallt zum Stillstand. Verkette drei Tweens auf einer Eigenschaft:
| Phase | Beschleunigung | Distanz | Zeit | Gefühl |
|---|---|---|---|---|
| 1 Einlauf | power3.in | ~10% | ~20% | Bewegt sich kaum – Bewegung registriert, kein Ruck |
| 2 Ausbruch | none (linear) | ~65% | ~18% | ~2× durchschnittliche px/frame – zielgerichtet |
| 3 Auslauf | power4.out | ~25% | ~62% | Abklingender Schlurf zur Ruhe – killt den Knall |
Regeln:
- Der Auslauf ist ≥3× der Einlauf in der ZEIT. Wenn es immer noch knallt: verlängere die Zeit des Auslaufs (nicht die Distanz) oder verwende
power5.out. - Phase 2 bleibt linear – eine Beschleunigung verliert den Ausbruchs-Kontrast.
- 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.
Eine Variante wählen
| Durch-Zoom | Inverser Zoom | Kurvenschnitt | Wasserfall-Schnitt | |
|---|---|---|---|---|
| Anwendungsbereich | Szeneninterner Textwechsel | Ankunfts-/Höhepunkt-Beat | Zwischen Szenen | Text-zu-Text-Übergang |
| Z-Vorzeichen / Achse | wachsend (Schub) | schrumpfend (Zug) | X / Y | X, pro Wort |
| Bewegung/Skala | 1→1,2, dann 0,75→1 | 1→0,8, dann 1,25→1 | ±230px | ±230px |
| Spitzen-Unschärfe | 10px Text / 18–20 Vollbild | 10px Text / 18–20 Vollbild | 8–10px optional | keine |
| Beschleunigungen | 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 den Übergang |
Anti-Patterns
| Tu das nicht | Stattdessen | Warum |
|---|---|---|
| Vollbild-Schub für Szenenübergänge | Kurvenschnitt mit Teilbewegung | Das Auge sucht den Anker – ein Vollbild-Schub bricht den Strom |
| power4.inOut für einen einzelnen Tween | Drei-Phasen-Schiebekurve | inOut knallt zum Stillstand; die Dreiteilung erzeugt den langsamen Auslauf |
| Binäre Deckkraft 0→1 beim Wasserfall-Eingang | tl.set bei 0, Deckkraft nie ausblenden | opacity: 1 beim Start zu tweenen erzeugt einen Blitz auf dem ersten Frame |
| Unschärfe + Deckkraft im selben Tween | Getrennte Tweens | GSAP-Einschränkung: Gleichzeitige Unschärfe + Deckkraft-Tweens auf demselben Element erzeugen einen leeren Frame |
| Wasserfall-Schnitt in einer Registry | Nur innerhalb einer worker-authorierten Multi-Beat-Komp | Registry-Tweens arbeiten auf Clip-Wrappern; Wort-Tweens brauchen direkte Kind-Referenzen |
Unschärfe direkt an einem <video> | Wickle es in einen Container und mache den Container unscharf | Browser-Beschränkung: Unschärfe auf video wird auf einigen Plattformen nicht unterstützt |
| Überlappende Exit-/Entry-Bewegungen auf Z | Harte Trennung – Exit schließt ab, bevor Entry beginnt | Z-Überlappung erzeugt eine instantane Kollision im 3D-Raum, die die Illusion zerstört |
Entscheidungsmatrix
Starte hier:
- Ist es ein Szenenübergang? → Kurvenschnitt (Standard). Nur wenn es ein Text-zu-Text ist, erwäge Wasserfall-Schnitt.
- Ist es ein szeneninterner Textwechsel? → Durch-Zoom. Nur wenn es ein Höhepunkt ist, erwäge Inversen Zoom.
- Ist es ein Zustandswechsel derselben Oberfläche? → Unschärfe-Schnitt (sparsam).
- Ist es eine szeneninterne Titelankunft? → Wasserfall-Eingang.
- Muss die Gruppe nach der Ankunft Platz schaffen? → Schiebekurve.
Niemals einen szeneninternen Wechsel für einen Szenenübergang verwenden oder umgekehrt. Jeder Übergang kostet Aufmerksamkeit – sparsam einsetzen.
Das vollständige GSAP-Implementierungsbeispiel (Worker + Registry) befindet sich in examples/gsap-implementation.md. Siehe auch motion-doctrine für das SEAM-Gesetz und die Regeln des SEAM-Tors.