Bewegtbild: die Kurven von GSAP, der Zeiger faehrt einen Bogen

Die Website macht ihre Bewegungen mit gsap 3.14.2. Uebernommen sind die
Kurven, nicht das Paket: was GSAP darueber hinaus kann -- Zeitleisten,
ScrollTrigger, MotionPath -- setzt voraus, dass etwas laeuft. Hier
laeuft nichts, animChat(i, t) bekommt seinen Fortschritt von aussen und
ist damit selbst schon die Zeitleiste. Ein paused timeline mit
.progress(t) waere dieselbe Konstruktion mit 70 KB darunter, und ein
Easing ist eine Zeile.

Zwei der Kurven waren ohnehin GSAPs: daempfen ist Wort fuer Wort
power2.inOut, rueck ist back.out(1,70158). Die Namen stehen jetzt
daneben, dazu kommen raus (power2.out) und knall (expo.out).

  Der Zeiger fuhr auf power2.inOut, also langsam an, in der Mitte
  schnell, wieder abbremsend -- die Bewegung eines Schlittens. Eine
  Hand ist sofort schnell und wird zum Ziel hin langsam.

  Und er fuhr auf der Geraden. Jetzt auf einer quadratischen Bezier,
  Stuetzpunkt 13 % der Strecke quer nach aussen, vom Verlauf weg. Rund
  27 px Ausbuchtung auf 410 px Weg: es faellt nicht auf, das ist der
  Punkt.

  Der Klickring geht auf zwei Kurven, Radius auf expo.out und die
  Deckung linear hinterher. Beides auf derselben sah aus wie eine
  Blase, die sich aufblaest.

  Der Anlauf ist von 0,6 s auf 0,18 s geschrumpft. Am Ende steht das
  Bild eine halbe Sekunde still, damit man das Ergebnis liest; lief
  vorn nochmal eine halbe, waren das ueber den Schleifenstoss hinweg
  1,2 von 6 Sekunden Stillstand am Stueck.

MP4 neu gebaut, Werte unveraendert: H.264, 1080x1350, 30 fps, 6,0 s,
stumme AAC-Spur. Geprueft ist das an Kontaktabzuegen ueber die 180
Bilder, nicht am Lauf.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv

POST-6.md

@@ -638,15 +638,72 @@ das Projekt bestätigt sie. Das ist die Funktion, die die Website meint mit
 
 | Zeit | Was passiert |
 |---|---|
-| 0,0 – 0,6 s | Ruhe. Der Verlauf steht: Sandra, Maike, Tobias |
-| 0,6 – 1,3 s | Der Zeiger fährt auf Tobias' Nachricht, der Pfeil erscheint an ihr |
+| 0,0 – 0,2 s | Ruhe. Der Verlauf steht: Sandra, Maike, Tobias |
+| 0,2 – 1,1 s | Der Zeiger fährt auf Tobias' Nachricht, der Pfeil erscheint an ihr |
 | 1,3 – 1,6 s | Klick |
-| 1,6 – 2,0 s | Das Menü schnappt nach oben auf: Reagieren, Antworten, Im Thread antworten, Anpinnen, Aufgabe erstellen, Bearbeiten, Löschen |
+| 1,5 – 2,0 s | Das Menü schnappt nach oben auf: Reagieren, Antworten, Im Thread antworten, Anpinnen, Aufgabe erstellen, Bearbeiten, Löschen |
 | 2,4 – 3,4 s | Der Zeiger geht auf „Aufgabe erstellen", die Zeile hebt sich, Klick |
 | 3,6 – 4,8 s | Das Menü schließt, die Aufgabenkarte klappt in Tobias' Nachricht auf, der Verlauf rutscht nach |
 | 4,8 – 5,4 s | Die Systemzeile „Aufgabe „Materialliste prüfen" im Projekt erstellt" erscheint |
 | 5,4 – 6,0 s | Halt auf dem Ergebnis |
 
+### Die Kurven sind die von GSAP, die Bibliothek ist es nicht
+
+Die Website macht ihre Bewegungen mit **GSAP** (`gsap@3.14.2`, Standard-Lizenz;
+`HeroSection`, `Navbar`, `HoneycombSection`, `FAQSection` und weitere). Die
+Frage lag also nahe, es hier auch zu tun. Die Antwort ist: **die Kurven ja, die
+Bibliothek nein.**
+
+Was GSAP über eine Kurve hinaus kann — Zeitleisten, ScrollTrigger,
+MotionPathPlugin —, setzt voraus, dass etwas *läuft*. Hier läuft nichts:
+`animChat(i, t)` bekommt seinen Fortschritt von außen und zeichnet daraus den
+Stand. Die Funktion **ist** schon die Zeitleiste, und `animation.mjs` sampelt
+sie Bild für Bild. Ein `gsap.timeline({paused: true})` mit `.progress(t)` wäre
+genau dieselbe Konstruktion, nur mit 70 KB darunter — und das Repo ist autark,
+jede Datei in `vendor/` liegt dort, weil sie etwas kann, das man nicht in fünf
+Zeilen schreibt (DOM nach Canvas, ZIP). Ein Easing ist eine Zeile.
+
+Dazu kommt: **zwei der Kurven waren längst GSAPs.** `daempfen` ist Wort für
+Wort `power2.inOut`, `rueck` ist `back.out(1.70158)`. Die Datei sprach die
+Sprache schon, sie sagte es nur nicht. Jetzt stehen die Namen daneben, und der
+Satz ist vollständig:
+
+| in der Datei | GSAP | wofür |
+|---|---|---|
+| `daempfen` | `power2.inOut` | Wege mit Anfang und Ende: das Wandern zur Menüzeile, das Aufklappen der Karte |
+| `rueck` | `back.out(1.7)` | das Menü, das aufschnappt und einmal leicht überschwingt |
+| `raus` | `power2.out` | alles, was ankommt und liegen bleibt: der Zeiger, die Systemzeile |
+| `knall` | `expo.out` | der Klickring |
+
+**Der Zeiger fährt jetzt wie eine Hand und nicht wie ein Schlitten.** Er lag
+auf `power2.inOut` — langsam an, in der Mitte schnell, wieder abbremsend. So
+bewegt sich ein Schlitten auf einer Schiene. Eine Hand ist sofort schnell und
+wird zum Ziel hin langsam, also `power2.out`.
+
+**Und er fährt einen Bogen.** Auf der Geraden zwischen Start und Ziel liegt kein
+Zeiger, den je ein Mensch geführt hat. Der Stützpunkt einer quadratischen
+Bézierkurve sitzt quer zur Strecke, 13 % ihrer Länge nach außen — vom Verlauf
+weg, damit der Zeiger nicht über die Blasen streicht. Das sind rund 27 px
+Ausbuchtung auf 410 px Weg; es fällt nicht auf, und genau das ist der Punkt.
+Bei `p = 1` liegt die Bahn exakt auf dem Ziel, das anschließende Wandern zur
+Menüzeile setzt also sauber daran an.
+
+**Der Klickring geht auf zwei Kurven.** Der Radius auf `expo.out`, also fast
+sofort draußen, die Deckung linear hinterher. Beides auf derselben Kurve sah
+aus wie eine Blase, die sich aufbläst — ein Klick ist ein Stoß und kein
+Aufpumpen.
+
+**Der Anlauf ist von 0,6 s auf 0,18 s geschrumpft.** Am Ende steht das Bild
+eine halbe Sekunde still, damit man das Ergebnis liest. Lief vorne noch einmal
+eine halbe Sekunde nichts, waren das über den Schleifenstoß hinweg 1,2 von
+6 Sekunden Stillstand am Stück, und die Schleife sah aus, als hänge sie. Der
+Halt am Ende bleibt, der am Anfang ist auf ein Achtel geschrumpft.
+
+> **Nachgeprüft ist das an Einzelbildern, nicht am Lauf.** Kontaktabzüge über
+> die 180 Bilder und eine Nahaufnahme des Klickrings zeigen, was die Kurven
+> rechnen. Ob die Bewegung *läuft*, sieht man erst im Abspielen — dieser eine
+> Schritt steht noch aus.
+
 ### Warum Tobias' Nachricht
 
 Nicht irgendeine: die Aufgabenkarte aus der Quelle trägt **„Tobias Wagner ·