{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "seitenwechsel-wachsende-form",
 "name": "Seitenwechsel in wachsender Markenform",
 "name_en": "Page transition that grows in a brand shape",
 "kurz": "Die neue Seite wächst in einer Markenform: als Laib von unten, als Kreis ab dem Klick oder als Terrassen; beim Zurück schrumpft sie wieder.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "erzählend",
  "weich",
  "markenstark"
 ],
 "technik": [
  "view-transitions",
  "clip-path",
  "web-animations-api",
  "navigation-api",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die neue Seite erscheint in einer Form, die zur Marke gehört und sichtbar wächst: ein Laib, der sich von unten wölbt, ein Kreis, der am geklickten Link aufgeht, oder Stufen, die wie Terrassen nacheinander steigen. Technisch ist das ein echter Seitenaufruf mit Cross-Document View Transition. Der Kopf der Seite bleibt stehen, darunter schneidet clip-path mit path() die neue Seite frei. Beim Zurück läuft es umgekehrt: Die Form schrumpft, und der Kreis kehrt zu dem Link zurück, von dem man kam.",
  "warum_es_wirkt": "Ein Seitenwechsel ist der Moment, in dem eine Marke sonst nichts sagt. Eine wiedererkennbare Form macht ihn zur Signatur, ohne den Inhalt aufzuhalten. Die Richtung erklärt die Struktur: Hinein wächst, zurück schrumpft. Weil die Form erst langsam und dann zügig wächst, nimmt das Auge sie als Form wahr und nicht als schnellen Wischer.",
  "wann_einsetzen": "Websites mit wenigen, klaren Ebenen (Übersicht und Detail) und einer Marke, die eine einfache Grundform hat: Bäckerei (Laib), Fotografie und Optik (Kreis, Blende), Weingut, Treppenbau oder Architektur (Stufe). Gut als zweite Signatur neben einem ruhigen Hero.",
  "wann_nicht": "Nicht bei Formularstrecken, Shops mit vielen schnellen Wechseln (Filter, Paginierung) oder auf Seiten, die man oft hin und her wechselt; dort kurze Überblendung. Nicht, wenn die Form nichts mit der Marke zu tun hat. Nicht mit Federkurven: Eine Fläche, die überschwingt, wirkt billig. Nicht zusätzlich zu einem Preloader.",
  "varianten": [
   "laib: weiche Wölbung von unten, die Form steigt und flacht oben ab; zurück sinkt sie wieder ab",
   "klickpunkt: Kreis ab dem geklickten Link, Position per pageswap und pagereveal übergeben; zurück schrumpft der Kreis in den Link der Übersicht",
   "stufe: fünf Stufen steigen mit Versatz nacheinander wie Terrassen; zurück fallen sie von oben"
  ],
  "umsetzung": "1. Im Kopf jeder Seite als erste Zeile <style>@view-transition{navigation:auto}</style>, damit der Übergang auch vor dem Laden der Stylesheets angemeldet ist. 2. Der Kopf der Seite bekommt view-transition-name: kopf und steht während des Wechsels still; ::view-transition-old(root) und ::view-transition-new(root) bekommen animation: none, die Bewegung kommt aus JavaScript. 3. Beim Klick auf einen Link die Position merken; im pageswap-Ereignis der alten Seite schreibt das Skript sie als Anteil der Fensterbreite und -höhe in sessionStorage. 4. Im pagereveal-Ereignis der neuen Seite (Skript ohne defer im Kopf oder am Ende von body) die Richtung bestimmen: aus navigation.activation.from und entry (Ebene der Seite, bei traverse der Index). Tiefer heißt vor, höher oder Browser-Zurück heißt zurück. 5. Nach e.viewTransition.ready mit document.documentElement.animate() die Form animieren: vor auf '::view-transition-new(root)' von der Startform zur deckenden Form, zurück auf '::view-transition-old(root)' (mit z-index darüber) von deckend zur Startform. Die alte bzw. darunterliegende Seite dunkelt dabei über eine Grundfarbe von ::view-transition ab. 6. Die Formen als path() in Pixeln aus innerWidth und innerHeight mit gleicher Befehlsfolge in allen Schlüsselbildern, damit sie interpolieren; der Kreis als circle() bis zur fernsten Ecke. Die Endform deckt immer ganz (Kreis bis Math.hypot, Pfad über die Ränder hinaus), nie auf none animieren. 7. Bei reduzierter Bewegung kurze Überblendung (150 ms, linear). Ohne Unterstützung navigiert der Link ganz normal.",
  "mobil": "Gleiche Formen, aus der Fenstergröße berechnet. Die Wölbung ist am Telefon flacher (16 % der Höhe), die Stufen bleiben fünf. Der Kreis startet am angetippten Link. Die feste untere Leiste kann wie der Kopf einen eigenen view-transition-name bekommen und stehen bleiben.",
  "reduzierte_bewegung": "Kurze Überblendung von 150 ms ohne Form und ohne Abdunkeln. Die Richtung spielt keine Rolle.",
  "barrierefreiheit": "Ein echter Seitenaufruf: Fokus, Titel und Verlauf verhalten sich wie gewohnt, Bildschirmleser lesen die neue Seite. Nichts blinkt, die Form läuft unter 1,2 s. Bei reduzierter Bewegung nur Überblendung. Links bleiben normale <a href>, ohne JavaScript und ohne Unterstützung navigieren sie einfach."
 },
 "messwerte": {
  "easing": "Fläche ohne Überschwingen: laib cubic-bezier(0.37, 0, 0.63, 1), klickpunkt cubic-bezier(0.76, 0, 0.24, 1), stufe cubic-bezier(0.37, 0, 0.63, 1)",
  "dauer_ms": "laib 800 vor, 540 zurück; klickpunkt 800 vor, 540 zurück; stufe 1100 vor, 740 zurück (Faktor 0.67 aus den Rezepten)",
  "stagger_ms": "stufe 90 je Stufe innerhalb der Gesamtdauer",
  "distanz": "laib Wölbung 22 % der Höhe; stufe 5 Stufen; alte Seite dunkelt auf Deckkraft .55 ab",
  "sonstiges": "Kopf bleibt stehen (view-transition-name: kopf, ohne Animation); reduziert 150 ms Überblendung linear",
  "herkunft": "eigene Festlegung",
  "quelle": "Bewegungs-Partituren der Rezepte fotograf-film-bild-zuerst (800, inOut) und weingut-hofladen-herkunft (1100, luxus-weich); laib eigene Festlegung, weil lebensmittelhandwerk-theke für Flächen nur Expo-out führt"
 },
 "kurve": {
  "bezier": [
   0.37,
   0.0,
   0.63,
   1.0
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 800
 },
 "gesehen_bei": [
  {
   "seite": "Chrome for Developers: Cross-document view transitions for multi-page applications",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Opt-in mit @view-transition { navigation: auto; } für Navigationen auf derselben Origin; pageswap feuert vor dem letzten Bild der alten Seite, pagereveal vor dem ersten Bild der neuen; navigation.activation bzw. e.activation liefern Herkunft und Ziel, daraus die Richtung; Typen gehen nicht automatisch von der alten auf die neue Seite über; über vier Sekunden Ladezeit wird der Übergang übersprungen.",
   "art": "artikel"
  },
  {
   "seite": "Chrome for Developers: Same-document view transitions (Kreis vom Klickpunkt)",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/same-document",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Der Kreis wächst ab der letzten Klickposition (sonst Bildmitte) bis zur fernsten Ecke (Math.hypot); die Animation läuft per document.documentElement.animate mit pseudoElement '::view-transition-new(root)' nach transition.ready.",
   "art": "artikel"
  },
  {
   "seite": "Chrome for Developers: Use shape() for responsive clipping",
   "url": "https://developer.chrome.com/blog/css-shape",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: shape() in Chrome 135, Edge 135, Firefox 148 und Safari 18.4, nur für clip-path; anders als path() nimmt shape() CSS-Längen und Prozente. Grundlage für die Wahl: path() mit Pixeln, beim Übergang aus der Fenstergröße berechnet.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: pagereveal",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/Window/pagereveal_event"
  },
  {
   "titel": "MDN: pageswap",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/Window/pageswap_event"
  },
  {
   "titel": "MDN: @view-transition",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition"
  },
  {
   "titel": "MDN: clip-path path()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/path"
  }
 ],
 "kombinierbar_mit": [
  "vt-cross-document-mpa",
  "richtungsbewusste-uebergaenge",
  "clip-path-reveal-seite",
  "gebogener-wipe-shape",
  "vorhang-farbpanel-wipe",
  "karte-ganzflaechig-klickbar",
  "parallel-crossfade-preload"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026",
   "Jury-Urteil Bäckerei-Probe, 04.11.2026"
  ],
  "pruefnotizen": [
   "Anlass: Die Jury der Bäckerei-Probe (04.11.2026) fand den Seitenwechsel zu flüchtig: Ellipse mit Expo-out in 800 ms, fast alles passiert in den ersten 150 bis 200 ms, im Screencast in einem Bild. Darum hier Kurven ohne Überschwingen, die langsam anlaufen, und deutliches Abdunkeln der alten Seite.",
   "Abgrenzung: gebogener-wipe-shape und vorhang-farbpanel-wipe schieben ein Farbpanel über die Seite (zwei Phasen, Inhaltstausch hinter dem Panel); clip-path-reveal-seite schneidet geometrisch (Polygon, Fenster, Kreis) ohne Rückweg; richtungsbewusste-uebergaenge verschiebt Seiten nach Richtung. Hier wächst die neue Seite selbst in einer Markenform und schrumpft beim Zurück.",
   "Belege sind Dokumentationen (Chrome for Developers), keine ausgezeichnete Website mit genau dieser Form."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die neue Seite wächst in einer Markenform: als Laib von unten, als Kreis ab dem Klick oder als Terrassen; beim Zurück schrumpft sie wieder.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "echter_einsatz": "<style>@view-transition{navigation:auto}</style> als erste Zeile im Kopf; demo.html?seite=a|b sind zwei echte Seitenaufrufe",
   "pseudo": "::view-transition-old/new(root) animation: none, mix-blend-mode: normal; Form per element.animate({clipPath}, {pseudoElement}) nach viewTransition.ready; zurück: old(root) z-index 2",
   "abdunkeln": "::view-transition { background: --vt-dunkel }; untere Seite opacity 1 → 0.5 mit derselben Kurve",
   "richtung": "pagereveal: navigation.activation.from (seite a/b) und traverse mit from.index > entry.index = zurueck; gleiche Seite = skipTransition",
   "klickpunkt_uebergabe": "click merkt Position und Ziel (Tastatur: Mitte des Links); pageswap schreibt den Punkt (Anteil von innerWidth/innerHeight) und je Ziel-URL die Herkunft sessionStorage['wf-herkunft:' + Ziel] = {quelle, x, y}; pagereveal hin: Punkt (gültig 5 s); zurück (auch Browser-Zurück nach Minuten): navigation.activation.from.url → Herkunft → Link mit diesem href auf der Seite messen (Mitte des Bildes), Rückfall gespeicherter Punkt",
   "pagereveal_frueh": "Listener im Kopfskript, Ereignis wird bis zum Hauptskript aufgehoben",
   "laib": "path() aus 33 Schlüsselbildern, Kurve per JS gerechnet, effect linear; halbe Breite 0.16 → 0.92 × Breite, Scheitel von unten bis 1.62 × Höhe (Telefon 1.5) über den Rand; 800 ms hinein, 540 ms zurück, cubic-bezier(0.37, 0, 0.63, 1); alte Seite zusätzlich translateY 0 → -6vh; --vt-dunkel #2B211B",
   "klickpunkt": "circle(0px at x y) → circle(R at x y), R = Math.hypot(fernste Ecke) + 2; 800 ms hinein, 540 ms zurück, cubic-bezier(0.76, 0, 0.24, 1); nur Deckkraft der unteren Seite; --vt-dunkel #0e0e0e",
   "stufe": "path() mit 5 Terrassen aus 33 Schlüsselbildern, je Stufe eigener Fortschritt, 90 ms Versatz (zurück 60 ms, von rechts); 1100 ms hinein, 740 ms zurück, cubic-bezier(0.37, 0, 0.63, 1); --vt-dunkel #1b1c1f",
   "kopf": "view-transition-name: kopf ohne Animation, wenn beide Seiten dieselbe Grundfarbe haben (laib); bei Farbwechsel (klickpunkt, stufe) wächst der Kopf mit",
   "ende": "Endform deckt immer (Kreis bis zur fernsten Ecke, Pfad über die Ränder), nie none",
   "reduziert": "Typ ruhig: 150 ms linear Überblendung, kein Abdunkeln",
   "vorfuehrung": "gleiche Funktion per document.startViewTransition({update, types}); Zeiger tippt, 2600 ms Detailseite, Zurück, Schleife 4700 ms"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf einen Link wie Klick, der Kreis startet am Finger. Keine Hover-Abhängigkeit. Am Telefon flacherer Laib (Scheitel 1.5 × Höhe), Serien zweispaltig, unter 360 px einspaltig.",
  "reduziert": "Kurze Überblendung 150 ms linear über den Typ ruhig, keine Form, kein Abdunkeln, keine Verschiebung.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Rezepte und Welten: laib lebensmittelhandwerk-theke (Brotladen Siebold, Nienburg), klickpunkt fotograf-film-bild-zuerst (Mareike Hellwarth Fotografie, Jever), stufe weingut-hofladen-herkunft (Weingut Auerbeck, Bürgstadt). Kurve laib eigene Festlegung: das Rezept führt für Flächen nur Expo-out (--ease-flaeche), das verschluckt große Formen (Jury Bäckerei-Probe: Ellipse nach etwa 200 ms fertig). Geprüft mit echten Seitenaufrufen per CDP-Screencast, Einzelbilder etwa alle 80 ms ohne angehaltene Bewegung: Laib sichtbar als Form von etwa 300 bis 700 ms, Kreis 190 bis 570 ms, Stufen 460 bis 1080 ms; Zurück schrumpft in den Herkunftslink. Abgrenzung zu gebogener-wipe-shape und vorhang-farbpanel-wipe (Panel über der Seite), clip-path-reveal-seite (geometrisch, ohne Rückweg), richtungsbewusste-uebergaenge (Verschieben). pruef.sh je Variante ok, pruef-zugang nur info:kontrast-von-hand. Selbsturteil 4. Nachtrag 05.11.2026 (Jury Optik 2): klickpunkt merkt die Herkunft je Ziel-URL, der Rückweg schließt am Herkunftslink statt in der Bildschirmmitte; geprüft mit pruef-bewegung.js (film.klickpunkt).",
  "varianten": [
   {
    "id": "laib",
    "name": "Laib von unten",
    "wann": "Bäckerei, Konditorei, Hofkäserei: die neue Seite geht wie ein Laib auf, zurück sinkt sie ab.",
    "werte": {
     "dauer_ms": "800 / 540",
     "easing": "cubic-bezier(0.37, 0, 0.63, 1)",
     "form": "halbrunder Laib, wächst in Breite und Höhe",
     "alte_seite": "opacity 0.5, translateY -6vh"
    }
   },
   {
    "id": "klickpunkt",
    "name": "Kreis ab Klick",
    "wann": "Fotografie, Optik, Galerie: der Kreis öffnet sich am angeklickten Bild und schließt sich beim Zurück wieder in dieses Bild.",
    "werte": {
     "dauer_ms": "800 / 540",
     "easing": "cubic-bezier(0.76, 0, 0.24, 1)",
     "form": "circle() bis zur fernsten Ecke",
     "alte_seite": "opacity 0.5"
    }
   },
   {
    "id": "stufe",
    "name": "Terrassen",
    "wann": "Weingut, Treppenbau, Architektur, Landschaftsbau: fünf Stufen steigen nacheinander wie Terrassen, zurück fallen sie von rechts.",
    "werte": {
     "dauer_ms": "1100 / 740",
     "stagger_ms": "90 / 60",
     "easing": "cubic-bezier(0.37, 0, 0.63, 1)",
     "form": "5 Stufen, path()"
    }
   }
  ]
 }
}