{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "einmal-intro-session",
 "name": "Intro nur beim ersten Besuch (Session-Gedächtnis)",
 "name_en": "First-load-only intro",
 "kurz": "Das volle Intro läuft nur beim ersten Besuch im Tab. Neuladen und Navigation zeigen bloß einen kurzen Reveal mit 25 ms Versatz.",
 "kategorie": "Preloader & Intro",
 "kategorie_slug": "preloader-intro",
 "kategorie_nr": 2,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "luxuriös"
 ],
 "stimmung_roh": [
  "rücksichtsvoll",
  "souverän"
 ],
 "technik": [
  "vanilla-js",
  "view-transitions",
  "barba",
  "taxi"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Beim ersten Aufruf der Website in einem Tab läuft das volle Intro. Bei jeder weiteren Navigation, beim Neuladen und beim direkten Einstieg auf eine Unterseite läuft nur ein kurzer Seiten-Reveal oder gar nichts. Ein Klick oder eine Taste überspringt das Intro jederzeit.",
  "warum_es_wirkt": "Das Intro bleibt ein Ereignis statt eines Hindernisses. Die Marke bekommt ihren Auftritt einmal, am Anfang. Wer weiterklickt oder wiederkommt, ist sofort beim Inhalt.",
  "wann_einsetzen": "Bei jeder Seite mit einem Intro über etwa 1 Sekunde. Besonders dort, wo Besucher viel zwischen Seiten wechseln, etwa zwischen Preisen, Terminen und Projekten.",
  "wann_nicht": "Bei sehr kurzen Intros unter 800 ms, die niemanden aufhalten. Und wenn Besucher sofort Titel, Termin oder Preis brauchen: Dann besser gar kein Intro.",
  "varianten": [
   "sessionStorage-Flag: volles Intro einmal pro Tab, danach nur ein kurzer Reveal (Locomotive, Stewart & Partners).",
   "Zusätzlich localStorage: Wiederkehrer bekommen in einem neuen Tab ein schnelleres Intro (OFF+BRAND).",
   "Barba oder Taxi: eigener once-Hook bzw. First-Load-Transition, getrennt von den Navigations-Übergängen (Osmo).",
   "Nativ mit Cross-document-View-Transitions: pagereveal ohne e.viewTransition ist ein Erstaufruf, mit e.viewTransition eine Navigation.",
   "Überspringen per Klick, Esc oder Scrollen."
  ],
  "umsetzung": "Im <head>, parser-blockierend und vor dem ersten Paint: try { if (!sessionStorage.getItem('intro')) { document.documentElement.classList.add('has-intro'); sessionStorage.setItem('intro', '1'); } } catch (e) {}. Das Intro-CSS greift nur unter .has-intro. Fallstrick: Wird die Klasse erst später gesetzt, blitzt der Inhalt kurz auf, bevor das Intro ihn verdeckt. try/catch fängt private Modi ab. Mit MPA-View-Transitions (@view-transition { navigation: auto; }) zusätzlich im pagereveal-Handler: if (e.viewTransition) document.documentElement.classList.remove('has-intro'). Bei Barba oder Taxi gehört das Intro in den once-Hook.",
  "mobil": "Identisch. Auf Touch den Überspringen-Knopf ohne Tastenhinweis zeigen. Wischen über dem Intro überspringt es ebenfalls.",
  "reduzierte_bewegung": "Intro immer überspringen. Seitenwechsel ohne Reveal.",
  "barrierefreiheit": "Überspringen per Tastatur (Esc, Enter auf dem Knopf). Bei Intros über 2 Sekunden einen sichtbaren Überspringen-Knopf zeigen. Der Inhalt darunter ist schon gerendert, das Intro verdeckt ihn nur."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "Folgebesuche: Stagger 25 statt Intro (Locomotive)",
  "stagger_ms": "25",
  "distanz": "",
  "sonstiges": "Schlüssel: sessionStorage pro Tab; OFF+BRAND kombiniert mit localStorage für Tempo",
  "herkunft": "beobachtet",
  "quelle": "https://locomotive.ca/assets/scripts/app.js?v=1792099941132"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "Bonus 'First load animation' getrennt von den Navigations-Transitions.",
   "art": "demo"
  },
  {
   "seite": "Chrome for Developers: pagereveal",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document",
   "auszeichnung": "",
   "beobachtung": "pagereveal feuert bei jedem Seitenaufruf. e.viewTransition ist nur bei einer laufenden Cross-document-Transition gesetzt. Damit lassen sich Erstaufruf und Navigation unterscheiden.",
   "art": "artikel"
  },
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (app.js): sessionStorage \"locomotive.quickpreload\" – beim ersten Aufruf volles Preloader-Intro mit SplitText (chars, lines), danach nur noch kurzes Ausblenden (opacity 0, Stagger .025) und sofortiges Freigeben.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "OFF+BRAND",
   "url": "https://www.itsoffbrand.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (ob.2026.index.23.js): sessionStorage \"preloaderHasRun\" bricht den Preloader ab; localStorage \"visited\" verkürzt das Tempo bei Wiederkehrern (Faktor 4 → 1); Fortschritt als Zahl aus progress()×100.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Stewart & Partners",
   "url": "https://www.stewartpartners.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (sp-scripts.txt): sessionStorage \"visited\" – Wiederkehr im selben Tab entfernt die Klasse preloading und startet direkt pageLoadTl; nur beim ersten Besuch läuft der Lottie-Preloader mit Clip-Wipe.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Cross-document view transitions: pageswap/pagereveal (Chrome for Developers)",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document"
  }
 ],
 "kombinierbar_mit": [
  "intro-ohne-wartezeit",
  "bildstapel-intro",
  "logo-aufbau-intro",
  "vt-cross-document-mpa"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/",
  "meta": "https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Drei Produktionsbelege."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Das volle Intro läuft nur beim ersten Besuch im Tab. Neuladen und Navigation zeigen bloß einen kurzen Reveal mit 25 ms Versatz.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "gedaechtnis": "Kopf-Skript parser-blockierend im <head>: try { if (!sessionStorage.getItem('kielwasser.intro')) { html.classList.add('mit-intro'); sessionStorage.setItem('kielwasser.intro', '1'); } } catch (e) {} · Speicher gesperrt → kein Intro · reduzierte Bewegung → Abbruch vor dem Flag",
   "intro_css": ".mit-intro .intro { display: grid } (deckt ab dem ersten Paint), danach steuert JS per [data-an]",
   "intro_gesamt_ms": 2600,
   "buchstaben": "„Moin.“ als 5 Spans in Maske (overflow: hidden) · translateY(105%) → 0 · 900 ms · cubic-bezier(0.16, 1, 0.3, 1) · Versatz 60 ms",
   "gruss": "opacity 0 → 1, translateY 12px → 0 · 700 ms ab 380 ms · cubic-bezier(0.16, 1, 0.3, 1)",
   "strasse": "SVG-Maske mit pathLength=1, stroke-dasharray 1 1, stroke-dashoffset 1 → 0 · 1400 ms ab 150 ms · cubic-bezier(0.65, 0, 0.35, 1) · Fahrbahn 58 Einheiten breit, Rand #3fbadf 66 Einheiten opacity .35, Mittellinie 3 Einheiten dasharray 18 16",
   "auto": "folgt per getPointAtLength dem eased Fortschritt der Straße (requestAnimationFrame) und hält an der Flagge (x 1096 von 1200)",
   "flagge": "opacity 0 → 1, 16 px nach oben · 600 ms ab 1200 ms · cubic-bezier(0.34, 1.56, 0.64, 1)",
   "wischen": "clip-path inset(0 0 0 0) → inset(0 0 100% 0) · 850 ms ab 1750 ms · cubic-bezier(0.76, 0, 0.24, 1); Ende des Intros hängt an animation.finished",
   "folgeaufruf_reveal": "Navigation und Seitenblöcke opacity 0 → 1, translateY 14px → 0 · 500 ms · cubic-bezier(0.16, 1, 0.3, 1) · Versatz 25 ms (Messwert Locomotive, Stagger .025)",
   "reveal_nach_intro": "gleicher Reveal, Start 120 ms nach Wischbeginn (1870 ms)",
   "kurz_intro": "Variante Wiederkehr: neuer Tab und localStorage 'kielwasser.besucht' gesetzt → nur Buchstaben 600 ms, Versatz 30 ms, Wischen 550 ms ab 450 ms, gesamt 1000 ms (eigene Werte; OFF+BRAND verkürzt bei Wiederkehrern das Tempo)",
   "ueberspringen": "Knopf, Esc, wheel oder touchmove über dem Intro → opacity 1 → 0 in 150 ms linear",
   "buttons": "transform 350 ms cubic-bezier(0.34, 1.56, 0.64, 1) (Rezept fahrschule-freundlich-buchbar), UI-Zustände 150 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "simulation": "Neu laden: Fenster opacity .25 → 1 in 180 ms linear, dann Reveal ab 80 ms; Neuer Tab: removeItem('kielwasser.intro')",
   "farben": "Grund #f8f8ec, Sektion #eef0d8, Navy #142b50, Nacht #0e1d38, Himmel #3fbadf, Kennzeichen-Gelb #ffd60a (nur Fläche), Text #17243c, gedämpft #566175",
   "schriften": "Bricolage Grotesque (h1 700, clamp(2.5rem, .8rem + 4.6vw, 5.4rem), Laufweite -0.02em, Zeilenhöhe .98; Intro 800, clamp(6rem, 3rem + 13vw, 15rem), -0.045em) · Atkinson Hyperlegible Next (Text) · Geist Mono (Pult)"
  },
  "ausloeser": "laden",
  "touch": "Gleiches Verhalten wie am Desktop. Der Überspringen-Knopf zeigt keinen Esc-Hinweis, Wischen über dem Intro überspringt ebenfalls. Unter 560 px nutzt die Straße eine eigene, schmale Form (viewBox 400 × 420), damit Auto und Flagge sichtbar bleiben; die Klassenwahl steht 2 × 2.",
  "reduziert": "Kein Intro und kein Flag (das Kopf-Skript bricht vorher ab). Seitenwechsel und Neuladen ohne Reveal. Das Protokoll meldet „Reduziert · kein Intro“.",
  "korrekturen": {
   "beschreibung": "Beim ersten Aufruf der Website in einem Tab läuft das volle Intro. Bei jeder weiteren Navigation, beim Neuladen und beim direkten Einstieg auf eine Unterseite läuft nur ein kurzer Seiten-Reveal oder gar nichts. Ein Klick oder eine Taste überspringt das Intro jederzeit.",
   "warum_es_wirkt": "Das Intro bleibt ein Ereignis statt eines Hindernisses. Die Marke bekommt ihren Auftritt einmal, am Anfang. Wer weiterklickt oder wiederkommt, ist sofort beim Inhalt.",
   "wann_einsetzen": "Bei jeder Seite mit einem Intro über etwa 1 Sekunde. Besonders dort, wo Besucher viel zwischen Seiten wechseln, etwa zwischen Preisen, Terminen und Projekten.",
   "wann_nicht": "Bei sehr kurzen Intros unter 800 ms, die niemanden aufhalten. Und wenn Besucher sofort Titel, Termin oder Preis brauchen: Dann besser gar kein Intro.",
   "varianten": [
    "sessionStorage-Flag: volles Intro einmal pro Tab, danach nur ein kurzer Reveal (Locomotive, Stewart & Partners).",
    "Zusätzlich localStorage: Wiederkehrer bekommen in einem neuen Tab ein schnelleres Intro (OFF+BRAND).",
    "Barba oder Taxi: eigener once-Hook bzw. First-Load-Transition, getrennt von den Navigations-Übergängen (Osmo).",
    "Nativ mit Cross-document-View-Transitions: pagereveal ohne e.viewTransition ist ein Erstaufruf, mit e.viewTransition eine Navigation.",
    "Überspringen per Klick, Esc oder Scrollen."
   ],
   "umsetzung": "Im <head>, parser-blockierend und vor dem ersten Paint: try { if (!sessionStorage.getItem('intro')) { document.documentElement.classList.add('has-intro'); sessionStorage.setItem('intro', '1'); } } catch (e) {}. Das Intro-CSS greift nur unter .has-intro. Fallstrick: Wird die Klasse erst später gesetzt, blitzt der Inhalt kurz auf, bevor das Intro ihn verdeckt. try/catch fängt private Modi ab. Mit MPA-View-Transitions (@view-transition { navigation: auto; }) zusätzlich im pagereveal-Handler: if (e.viewTransition) document.documentElement.classList.remove('has-intro'). Bei Barba oder Taxi gehört das Intro in den once-Hook.",
   "mobil": "Identisch. Auf Touch den Überspringen-Knopf ohne Tastenhinweis zeigen. Wischen über dem Intro überspringt es ebenfalls.",
   "reduzierte_bewegung": "Intro immer überspringen. Seitenwechsel ohne Reveal.",
   "barrierefreiheit": "Überspringen per Tastatur (Esc, Enter auf dem Knopf). Bei Intros über 2 Sekunden einen sichtbaren Überspringen-Knopf zeigen. Der Inhalt darunter ist schon gerendert, das Intro verdeckt ihn nur."
  },
  "geprueft": "01.11.2026",
  "notiz": "Fahrschule Kielwasser (Kiel, erfunden) im Rezept fahrschule-freundlich-buchbar. Das Rezept schließt Typo- und Logo-Intros aus, weil die Anmeldung vorgeht. Gerade deshalb passt dieses Muster: Die Begrüßung „Moin.“ mit gezeichneter Straße ist überspringbar und kommt nur einmal pro Tab. Die Demo simuliert einen Browser mit „Neu laden“ und „Neuer Tab“ sowie zwei Seiten (Start, Klassen & Preise) als Zustände. Das Gedächtnis ist echt (sessionStorage 'kielwasser.intro', im <head> gesetzt): Ein echtes Neuladen der Demo zeigt deshalb kein Intro. Varianten: Session-Flag, + Wiederkehr kürzer (localStorage), Gegenprobe „Ohne Gedächtnis“. Das Pult protokolliert pro Aufruf, was lief, und zeigt den Speicherinhalt. Im echten Einsatz mit mehreren Dokumenten gilt das Kopf-Skript unverändert, dazu bei @view-transition { navigation: auto; } die pagereveal-Prüfung. Inspiration nur als Prinzip: gezeichnete Straße (TOFU Driving), Gelb als Straßenfläche (Schweizer Verkehrsplakat), große Sonnenscheibe (Compass Studio). AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: Werte-Zeile rgba(248,248,236,.45) → .55 (5,6:1); Nav und Main der Seite sind inert, solange das Intro liegt (MutationObserver auf data-an/mit-intro); bei 561–860 px nur der neueste Protokolleintrag, umbrechend; Knopf-Rahmen im Kontrastmodus."
 }
}