{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "seitenname-typo-uebergang",
 "name": "Seitenname als Übergang (Typo-Overlay, kinetische Schrift)",
 "name_en": "Page-name / kinetic typography transition",
 "kurz": "Beim Klick fährt ein Vorhang in Markenfarbe hoch, der Name der Zielseite steigt groß aus der Maske und gibt die neue Seite wieder frei.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "laut"
 ],
 "stimmung_roh": [
  "typografisch",
  "selbstbewusst",
  "editorial",
  "laut"
 ],
 "technik": [
  "gsap",
  "splittext",
  "css",
  "barba"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Beim Klick auf einen Link deckt ein Vorhang die Seite. Darin erscheint groß der Name der Zielseite: Zeichen für Zeichen aus einer Maske, eingeblendet oder als Wand aus bewegten Zeilen. Der Name hält kurz, während die neue Seite lädt. Dann verlässt er die Bühne, der Vorhang öffnet sich nach oben und die neue Seite ist da.",
  "warum_es_wirkt": "Navigation bekommt eine Überschrift. Die Ladezeit ist gefüllt statt leer, und die Hausschrift steht für einen Moment allein im Rampenlicht.",
  "wann_einsetzen": "Bei Marken mit starker Hausschrift, bei Studios, Event- und Kampagnenseiten und bei Websites mit wenigen, klar benannten Hauptseiten.",
  "wann_nicht": "Bei tiefen Informationsarchitekturen mit häufigen Seitenwechseln (zu langsam), bei langen Seitennamen und überall, wo Besucher schnell zum Ziel wollen, etwa in Shops oder Spendenstrecken.",
  "varianten": [
   "Maske: Zeichen steigen einzeln aus ihrer Maske und verlassen sie nach oben (Osmo, Page Name Transition mit Wipe)",
   "Einblenden: Name blendet ein und rückt 50 px nach oben, dann linear aus (Dennis Snellenberg, gemessen)",
   "Kinetisch: Zeilen aus dem Namen fahren gegenläufig ein und beim Öffnen nach vorn (Codrops, kinetische Typo)",
   "Typewriter oder Scramble: Name wird getippt oder aus Zufallszeichen aufgelöst"
  ],
  "umsetzung": "Den Zielnamen aus einem data-Attribut oder dem Linktext lesen und per SplitText mit mask:'chars' zerlegen. Timeline: Panel rein (yPercent 100 → 0, power3.inOut), Zeichen von yPercent 100 auf 0 (power4.out, stagger 0.03), halten bzw. auf den Fetch warten, Zeichen auf yPercent -100, Panel raus. In einer SPA oder mit Barba.js läuft der Seitentausch unter dem geschlossenen Vorhang. Mit nativen Cross-document View Transitions (@view-transition { navigation: auto; }) kennt die neue Seite den Namen nicht von selbst: Ihn im pageswap-Event in sessionStorage legen und im pagereveal-Event auslesen. Fallstrick: Erst nach document.fonts.ready teilen und messen, sonst springt die Schrift. Die Demo simuliert die Seiten als Zustände in einer Datei.",
  "mobil": "Den Namen per JS oder clamp() auf die Breite setzen. Auf schmalen Bildschirmen ganze Wörter statt Zeichen animieren.",
  "reduzierte_bewegung": "Den Namen ohne Bewegung kurz einblenden oder den Übergang ganz weglassen.",
  "barrierefreiheit": "Den Vorhang mit aria-hidden versehen, denn die Zielseite trägt ihren echten Titel selbst. Nach dem Wechsel den Fokus auf die Überschrift der neuen Seite setzen und document.title aktualisieren. So gibt es keine doppelte Ansage."
 },
 "messwerte": {
  "easing": "Power4.easeOut (Name), Power3.easeInOut (Panel raus)",
  "dauer_ms": "gesamt ca. 1300–1500",
  "stagger_ms": "",
  "distanz": "Name y 0 → -50 px",
  "sonstiges": "Name wird während das Panel steht eingeblendet, dann .6s linear ausgeblendet",
  "herkunft": "beobachtet",
  "quelle": "https://dennissnellenberg.com/assets/js/index-new.js"
 },
 "kurve": {
  "bezier": [
   0.22,
   1,
   0.36,
   1
  ],
  "css": "cubic-bezier(0.22, 1, 0.36, 1)",
  "name": "power4.out",
  "dauer_ms": 1300
 },
 "gesehen_bei": [
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "'Page Name Transition' als eigene Lektion und als Vorlage 'Page Name Transition (Wipe)'.",
   "art": "demo"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: HTML .loading-words mit h2 je Zielseite (Home, Work, TWICE, The Damai …), index-new.js blendet den aktiven Namen im Panel ein (opacity 0 → 1, y 0 → -50, .8s Power4.easeOut) und nach .2s mit dem Panel wieder aus.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course"
  }
 ],
 "kombinierbar_mit": [
  "vorhang-farbpanel-wipe",
  "scramble-decode",
  "split-mask-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenname-typo-uebergang/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenname-typo-uebergang/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenname-typo-uebergang/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Interlude-Demo durch Snellenberg ersetzt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Beim Klick fährt ein Vorhang in Markenfarbe hoch, der Name der Zielseite steigt groß aus der Maske und gibt die neue Seite wieder frei.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "SplitText@3.15.0"
  ],
  "werte": {
   "panel_rein": "yPercent 100 → 0, 500 ms, power3.inOut (≈ cubic-bezier(0.76, 0, 0.24, 1))",
   "panel_raus": "yPercent 0 → -100, 550 ms, power3.inOut",
   "seitenwechsel": "bei 500 ms, wenn der Vorhang deckt",
   "inhalt_nach": "neue Seite y 40 px → 0, 800 ms, power4.out, 100 ms nach Beginn von panel_raus",
   "name_kurve": "power4.out (≈ cubic-bezier(0.22, 1, 0.36, 1)), 800 ms",
   "name_groesse": "auf Breite gesetzt: 86 % der Innenbreite (unter 640 px 94 %), höchstens 42 % der Höhe; Big Shoulders 800, Versal, Zeilenhöhe 0.86",
   "maske": "Zeichen (unter 640 px Wörter) yPercent 100 → 0 ab 150 ms, Versatz 30 ms; Halten 250 ms ab Stand (150 ms + 55 % der Dauer + Versatz); raus yPercent 0 → -100, 450 ms, power3.in, Versatz 15 ms; Panel 100 ms danach; Vorhang gesamt bei 8 Zeichen 1,7 s",
   "gemessen": "Name und Unterzeile opacity 0 → 1, y 0 → -50 px, 800 ms power4.out ab 100 ms (Versatz 60 ms); ab 800 ms 600 ms linear aus; Panel raus ab 850 ms (Halten 350 ms); gesamt 1400 ms",
   "kinetisch": "6 Konturzeilen (Name ×5, -webkit-text-stroke 1,5 px) gegenläufig x ±22 vw → 0, 1000 ms power4.out, Versatz 40 ms; Name xPercent -11 → 0 und opacity 0 → 1; ab 950 ms scale 1 → 1.22 und opacity → 0, 600 ms power3.in; Panel raus ab 1050 ms",
   "unterzeile": "opacity 0 → 1 (Maske zusätzlich y 12 → 0), 600 ms power4.out",
   "wellen": "Hintergrundlinien xPercent 0 → -4, linear über die ganze Dauer",
   "reduziert": "Vorhang opacity 0 → 1 in 200 ms linear, Name steht, 300 ms halten, 200 ms aus",
   "farben": "Vorhang #073b4c, Name #ffffff, Unterzeile rgba(237,245,250,.82); Spenden-Button #ffca0a mit Text #1f2421, background-color .15s linear",
   "schriften": "Big Shoulders 800 (Name, Headlines), Archivo (Text), Geist Mono (Demo-Steuerung)"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten per Tippen. Unter 640 px steigt der Seitenname als ganzes Wort aus der Maske statt Zeichen für Zeichen; die Navigation rückt in eine zweite Kopfzeile, die Hover-Unterstreichung entfällt.",
  "reduziert": "Kein Weg, kein Versatz: Der Vorhang blendet mit stehendem Namen in 200 ms ein, hält 300 ms und blendet in 200 ms aus. Die neue Seite steigt nicht nach.",
  "korrekturen": {
   "beschreibung": "Beim Klick auf einen Link deckt ein Vorhang die Seite. Darin erscheint groß der Name der Zielseite: Zeichen für Zeichen aus einer Maske, eingeblendet oder als Wand aus bewegten Zeilen. Der Name hält kurz, während die neue Seite lädt. Dann verlässt er die Bühne, der Vorhang öffnet sich nach oben und die neue Seite ist da.",
   "warum_es_wirkt": "Navigation bekommt eine Überschrift. Die Ladezeit ist gefüllt statt leer, und die Hausschrift steht für einen Moment allein im Rampenlicht.",
   "wann_einsetzen": "Bei Marken mit starker Hausschrift, bei Studios, Event- und Kampagnenseiten und bei Websites mit wenigen, klar benannten Hauptseiten.",
   "wann_nicht": "Bei tiefen Informationsarchitekturen mit häufigen Seitenwechseln (zu langsam), bei langen Seitennamen und überall, wo Besucher schnell zum Ziel wollen, etwa in Shops oder Spendenstrecken.",
   "varianten": [
    "Maske: Zeichen steigen einzeln aus ihrer Maske und verlassen sie nach oben (Osmo, Page Name Transition mit Wipe)",
    "Einblenden: Name blendet ein und rückt 50 px nach oben, dann linear aus (Dennis Snellenberg, gemessen)",
    "Kinetisch: Zeilen aus dem Namen fahren gegenläufig ein und beim Öffnen nach vorn (Codrops, kinetische Typo)",
    "Typewriter oder Scramble: Name wird getippt oder aus Zufallszeichen aufgelöst"
   ],
   "umsetzung": "Den Zielnamen aus einem data-Attribut oder dem Linktext lesen und per SplitText mit mask:'chars' zerlegen. Timeline: Panel rein (yPercent 100 → 0, power3.inOut), Zeichen von yPercent 100 auf 0 (power4.out, stagger 0.03), halten bzw. auf den Fetch warten, Zeichen auf yPercent -100, Panel raus. In einer SPA oder mit Barba.js läuft der Seitentausch unter dem geschlossenen Vorhang. Mit nativen Cross-document View Transitions (@view-transition { navigation: auto; }) kennt die neue Seite den Namen nicht von selbst: Ihn im pageswap-Event in sessionStorage legen und im pagereveal-Event auslesen. Fallstrick: Erst nach document.fonts.ready teilen und messen, sonst springt die Schrift. Die Demo simuliert die Seiten als Zustände in einer Datei.",
   "mobil": "Den Namen per JS oder clamp() auf die Breite setzen. Auf schmalen Bildschirmen ganze Wörter statt Zeichen animieren.",
   "reduzierte_bewegung": "Den Namen ohne Bewegung kurz einblenden oder den Übergang ganz weglassen.",
   "barrierefreiheit": "Den Vorhang mit aria-hidden versehen, denn die Zielseite trägt ihren echten Titel selbst. Nach dem Wechsel den Fokus auf die Überschrift der neuen Seite setzen und document.title aktualisieren. So gibt es keine doppelte Ansage."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung mit der erfundenen Uferbande e.V. aus Potsdam (Uferpflege an der Havel). Big Shoulders 800 und Archivo, Havel-Petrol als Markenton, Gelb nur am Spenden-Button. Bilder sind eigene SVG (Schilfgürtel, Wellenlinien). Fünf Seiten (Start, Projekte, Mitmachen, Wirkung, Spenden) sind Zustände in einer Datei; der Vorhang trägt den Namen der Zielseite, eine Unterzeile und die Seitenzahl. Umschalter für drei Varianten: Maske (Standard, Osmo), Gemessen (Snellenberg-Werte: power4.out 800 ms, y -50 px, 600 ms linear aus) und Kinetisch (Konturzeilen). Snellenbergs Power3 entspricht in GSAP 3 power3 (Quart), nicht easeInOutCubic. Vorführen läuft durch alle Seiten und wechselt bei jedem Schritt die Variante. Nachgebessert: Zeilenhöhe der Startüberschrift 0,95 → 1,02, die Ü-Punkte stießen an das H der Zeile darüber; Kennzahlen umbrechen nicht mehr (nowrap, geschütztes Leerzeichen vor der Einheit). AD-Review 01.11.2026: Note 4"
 }
}