{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "scroll-char-choreo",
 "name": "Scroll-gescrubbte Zeichen-Choreografie",
 "name_en": "On-scroll typography animations (scrubbed character choreography)",
 "kurz": "Eine Kapitelüberschrift setzt sich Zeichen für Zeichen aus der Unschärfe zusammen, solange gescrollt wird, und löst sich am Ende des Kapitels wieder auf.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "experimentell",
  "laut",
  "dynamisch"
 ],
 "technik": [
  "gsap",
  "splittext",
  "scrolltrigger"
 ],
 "technik_gruppen": [
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine große Überschrift wird in Zeichen zerlegt. Jedes Zeichen startet außerhalb der Ruhelage: unscharf und unsichtbar, auseinandergezogen, in 3D gekippt oder gestreckt. Der Weg in die Ruhelage hängt am Scrollfortschritt (scrub). Scrollt man zurück, löst sich die Zeile wieder auf. Ein Stagger von der Mitte oder vom Anfang gibt der Bewegung eine Richtung.",
  "warum_es_wirkt": "Der Nutzer setzt die Überschrift durch sein eigenes Scrollen zusammen. Das gibt ihm Kontrolle über das Tempo und macht aus einer Zwischenüberschrift einen kleinen Auftritt. Weil nichts von selbst abläuft, wirkt der Effekt auch in ruhigen Layouts nicht aufdringlich.",
  "wann_einsetzen": "Eine Kapitelüberschrift oder ein einzelnes Statement zwischen Bildern und Projekten. Intros einzelner Sektionen auf Portfolio- und Projektseiten.",
  "wann_nicht": "Nicht auf jeder Überschrift wiederholen. Nicht für Inhalte, die ohne Scrollen lesbar sein müssen, etwa Navigation, Preise oder Formulartitel. Nicht für lange Sätze über rund 40 Zeichen.",
  "varianten": [
   "Unschärfe: opacity 0 und blur(10px) auf scharf, am Ende wieder aus (belegt bei Fantasy)",
   "Laufweite: Zeichen starten gespreizt und ziehen sich zur Zeilenmitte zusammen",
   "Kippen: 3D-Flip pro Zeichen mit rotateX -90° und transformOrigin '50% 50% -0.5em'",
   "Streuung aus Zufallspositionen",
   "Streckung und Stauchung über scaleY und yPercent",
   "Geteilter Text: obere und untere Hälfte versetzt, sie treffen sich beim Scrollen"
  ],
  "umsetzung": "SplitText.create(el, { type: 'lines,words,chars', autoSplit: true }). Eine Timeline, normiert auf 1.25: fromTo(chars, { opacity: 0, filter: 'blur(10px)' }, { opacity: 1, filter: 'blur(0px)', duration: 0.25, ease: 'none', stagger: { amount: 0.25 } }, 0), dann to(chars, { opacity: 0, filter: 'blur(10px)', duration: 0.25, ease: 'power2.in', stagger: { amount: 0.25 } }, 0.75). Kopplung per ScrollTrigger { trigger: sektion, start: 'top bottom', end: 'bottom bottom', scrub: true }. Eine hohe Sektion mit sticky Bühne hält die Überschrift im Bild. Für 3D-Varianten perspective: 1000px am Elternelement oder transformPerspective setzen. Erst nach document.fonts.ready teilen, sonst stimmen die Umbrüche nicht. Fallstrick: viele Zeichen mit 3D-Transforms oder Blur erzeugen viele Ebenen, darum nur kurze Überschriften verwenden.",
  "mobil": "Nach Wörtern statt Zeichen teilen, das halbiert die Ebenen und bleibt flüssig. Alternativ einmalig beim Eintritt auslösen statt scrubben.",
  "reduzierte_bewegung": "Text steht in Ruhelage, keine Teilung und keine Scroll-Kopplung. Die Sektion wird nicht gepinnt.",
  "barrierefreiheit": "Die Überschrift bleibt ein echtes h2. SplitText setzt aria-label auf das Element und blendet die Teil-Spans für Screenreader aus. Der Text steht von Anfang an im DOM, auch wenn er optisch noch unsichtbar ist. Die Ruhephase muss lang genug sein, damit man die Zeile in Ruhe lesen kann."
 },
 "messwerte": {
  "easing": "linear / power2.in (Fantasy, gescrubbt); expo.out (Terminal)",
  "dauer_ms": "scrollgebunden; Teil-Tweens 250 (Fantasy) bzw. 400 (Terminal)",
  "stagger_ms": "Gesamt-amount 250 (Fantasy); 20 je Zeichen (Terminal)",
  "distanz": "blur 10px → 0; Scrollstrecke 500 px (Terminal)",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://fantasy.co/ ; https://terminal-industries.com/"
 },
 "kurve": {
  "bezier": [
   0.32,
   0,
   0.67,
   0
  ],
  "css": "cubic-bezier(0.32, 0, 0.67, 0)",
  "name": "power2.in",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – 3D Parallax Letters / 3D Perspective Text",
   "url": "https://blog.olivierlarose.com/tutorials/3d-parallax-letters",
   "auszeichnung": "",
   "beobachtung": "Tutorials zu Buchstaben mit 3D-Parallax beim Scrollen (Titel gesehen).",
   "art": "artikel"
  },
  {
   "seite": "Fantasy",
   "url": "https://fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (_nuxt/CD-pY35o.js): eigener GSAP-Effekt registerEffect 'charsInOut' – SplitText(lines, words, chars), Zeichen von alpha 0 + filter blur(10px) auf alpha 1 + blur 0 (stagger amount .25, Dauer .25, ease linear), ab Position .75 wieder ausblenden (power2.in); eingesetzt per ScrollTrigger {scrub:true} auf Sektions-Titeln (.h2-alt) inkl. Index-Zähler.",
   "art": "website"
  },
  {
   "seite": "Terminal Industries",
   "url": "https://terminal-industries.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Nuxt-Bundle): SplitText type 'chars' (charsClass '--char'), Timeline mit scrollTrigger {start 'top top', end 'top+=500', scrub:true} blendet die Zeichen mit opacity 0, duration .4, ease expo.out, stagger .02 aus.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops Tag ‚typography‘ (On-Scroll Typography Ideas)",
   "url": "https://tympanus.net/codrops/tag/typography/"
  },
  {
   "titel": "3D Perspective Text (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/3d-perspective-text"
  }
 ],
 "kombinierbar_mit": [
  "split-mask-reveal",
  "schrift-hero-viewportbreit",
  "kinetic-3d-shader-type"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-char-choreo/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-char-choreo/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-char-choreo/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Belegt mit Blur/Opacity-Choreografie; 3D-Rotation einzelner Zeichen wurde nicht gefunden."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Kapitelüberschrift setzt sich Zeichen für Zeichen aus der Unschärfe zusammen, solange gescrollt wird, und löst sich am Ende des Kapitels wieder auf.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0",
   "SplitText@3.15.0"
  ],
  "werte": {
   "kopplung": "ScrollTrigger auf der Kapitel-Sektion, start 'top bottom', end 'bottom bottom'; Fortschritt direkt auf timeline.progress (wie scrub: true, ohne Nachlauf)",
   "scrollstrecke": "Sektion 360vh, Bühne darin position: sticky, 100svh",
   "zeitleiste": "normiert auf 1.25: rein 0 bis 0.5, Ruhe 0.5 bis 0.75, raus 0.75 bis 1.25",
   "rein": "Teil-Tween 0.25, stagger { amount: 0.25 }, ease 'none'",
   "raus": "ab Position 0.75, Teil-Tween 0.25, stagger { amount: 0.25 }, ease 'power2.in' = cubic-bezier(0.32, 0, 0.67, 0)",
   "variante_unschaerfe": "opacity 0, filter blur(10px) → opacity 1, blur(0px) → wieder opacity 0, blur(10px); stagger from 'start' (Fantasy charsInOut)",
   "variante_laufweite": "opacity 0, x = Abstand der Zeichenmitte zur Zeilenmitte × 0.9 → x 0; raus wieder gespreizt; stagger from 'center'",
   "variante_kippen": "opacity 0, rotateX -90, yPercent 50, transformOrigin '50% 50% -0.5em', transformPerspective 1000 → 0; raus rotateX 90, yPercent -50; stagger from 'center'",
   "teilung": "SplitText type 'lines,words,chars' mit autoSplit (Desktop: Zeichen animiert), Touch: 'lines,words' (Wörter animiert)",
   "headline": "Hanken Grotesk 430, clamp(3rem, 0.6rem + 9.4vw, 10.6rem), line-height 0.94, letter-spacing -0.04em, 27 Zeichen",
   "ui": "cubic-bezier(0.1, 0.6, 0.4, 1) 250 ms (Rezept-Token)",
   "vorfuehrung": "simulierter Fortschritt 0 → 0.5 in 4.2 s linear, 0.5 → 0.56 in 1.2 s, → 1 in 1.8 s power1.in, 0.6 s Pause; Varianten im Wechsel"
  },
  "ausloeser": "scroll",
  "touch": "Gleiche Scroll-Kopplung, aber nach Wörtern statt Zeichen geteilt (weniger Ebenen). Die Ansicht zeigt den rechten Ausschnitt mit dem Kopfbau, die Umschalter sind größer.",
  "reduziert": "Kein Teilen, keine Scroll-Kopplung: die Überschrift steht sofort in Ruhelage, die Sektion ist nicht gepinnt, der Varianten-Umschalter ist ausgeblendet.",
  "korrekturen": {
   "beschreibung": "Eine große Überschrift wird in Zeichen zerlegt. Jedes Zeichen startet außerhalb der Ruhelage: unscharf und unsichtbar, auseinandergezogen, in 3D gekippt oder gestreckt. Der Weg in die Ruhelage hängt am Scrollfortschritt (scrub). Scrollt man zurück, löst sich die Zeile wieder auf. Ein Stagger von der Mitte oder vom Anfang gibt der Bewegung eine Richtung.",
   "warum_es_wirkt": "Der Nutzer setzt die Überschrift durch sein eigenes Scrollen zusammen. Das gibt ihm Kontrolle über das Tempo und macht aus einer Zwischenüberschrift einen kleinen Auftritt. Weil nichts von selbst abläuft, wirkt der Effekt auch in ruhigen Layouts nicht aufdringlich.",
   "wann_einsetzen": "Eine Kapitelüberschrift oder ein einzelnes Statement zwischen Bildern und Projekten. Intros einzelner Sektionen auf Portfolio- und Projektseiten.",
   "wann_nicht": "Nicht auf jeder Überschrift wiederholen. Nicht für Inhalte, die ohne Scrollen lesbar sein müssen, etwa Navigation, Preise oder Formulartitel. Nicht für lange Sätze über rund 40 Zeichen.",
   "varianten": [
    "Unschärfe: opacity 0 und blur(10px) auf scharf, am Ende wieder aus (belegt bei Fantasy)",
    "Laufweite: Zeichen starten gespreizt und ziehen sich zur Zeilenmitte zusammen",
    "Kippen: 3D-Flip pro Zeichen mit rotateX -90° und transformOrigin '50% 50% -0.5em'",
    "Streuung aus Zufallspositionen",
    "Streckung und Stauchung über scaleY und yPercent",
    "Geteilter Text: obere und untere Hälfte versetzt, sie treffen sich beim Scrollen"
   ],
   "umsetzung": "SplitText.create(el, { type: 'lines,words,chars', autoSplit: true }). Eine Timeline, normiert auf 1.25: fromTo(chars, { opacity: 0, filter: 'blur(10px)' }, { opacity: 1, filter: 'blur(0px)', duration: 0.25, ease: 'none', stagger: { amount: 0.25 } }, 0), dann to(chars, { opacity: 0, filter: 'blur(10px)', duration: 0.25, ease: 'power2.in', stagger: { amount: 0.25 } }, 0.75). Kopplung per ScrollTrigger { trigger: sektion, start: 'top bottom', end: 'bottom bottom', scrub: true }. Eine hohe Sektion mit sticky Bühne hält die Überschrift im Bild. Für 3D-Varianten perspective: 1000px am Elternelement oder transformPerspective setzen. Erst nach document.fonts.ready teilen, sonst stimmen die Umbrüche nicht. Fallstrick: viele Zeichen mit 3D-Transforms oder Blur erzeugen viele Ebenen, darum nur kurze Überschriften verwenden.",
   "mobil": "Nach Wörtern statt Zeichen teilen, das halbiert die Ebenen und bleibt flüssig. Alternativ einmalig beim Eintritt auslösen statt scrubben.",
   "reduzierte_bewegung": "Text steht in Ruhelage, keine Teilung und keine Scroll-Kopplung. Die Sektion wird nicht gepinnt.",
   "barrierefreiheit": "Die Überschrift bleibt ein echtes h2. SplitText setzt aria-label auf das Element und blendet die Teil-Spans für Screenreader aus. Der Text steht von Anfang an im DOM, auch wenn er optisch noch unsichtbar ist. Die Ruhephase muss lang genug sein, damit man die Zeile in Ruhe lesen kann."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept „Architektur: ruhiges Raster“ mit dem erfundenen Büro Kessling Rohde Architekten, Bielefeld (Hanken Grotesk, Weiß, #E1E3E3, #231F20). Das Rezept passt, weil die belegte Variante (Blur und Deckkraft, gescrubbt) leise ist und nur eine Kapitelüberschrift bewegt wird. Alle anderen Überschriften stehen still. Eigene SVG-Pläne (Shedhalle mit Kopfbau, Grundriss, Ansicht) statt Fotos. Drei Varianten per Umschalter: Unschärfe nach Fantasy, Laufweite-Kollaps, 3D-Kippen aus der Umsetzung. Die Zeitstruktur (Teil 0.25, Stagger-Gesamt 0.25, raus ab 0.75 mit power2.in) folgt dem gemessenen Fantasy-Effekt. Die Leiste zeigt den Scrollfortschritt live. Vorführung simuliert den Fortschritt und wechselt die Varianten. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Bühne mit grid-template-columns minmax(0, 1fr) und Variantenknöpfe mit flex-wrap (Text bei 320 px vorher 3 bis 6 px abgeschnitten). Offen: Kontrasttreffer betreffen nur Zeichen der Kapitelüberschrift, die vor dem Scrollen noch unscharf und blass sind (Effekt des Musters)."
 }
}