{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "gebogener-wipe-shape",
 "name": "Wipe mit gebogener Kante (Curved Wipe)",
 "name_en": "Curved wipe / bezier edge transition",
 "kurz": "Ein dunkles Panel fährt mit gewölbter Vorderkante über die Seite und gibt die neue mit hängender Hinterkante frei.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "verspielt",
  "organisch",
  "weich"
 ],
 "technik": [
  "svg",
  "css",
  "clip-path",
  "shape()",
  "gsap"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Panel fährt von unten über die Seite. Seine Vorderkante ist nicht gerade, sondern gewölbt. Die Wölbung wächst während der Fahrt. Ist die Seite bedeckt, fährt das Panel weiter nach oben und gibt die neue Seite frei. Jetzt hängt die Hinterkante nach unten durch und flacht zum Ende hin ab.",
  "warum_es_wirkt": "Die Wölbung wirkt wie Trägheit, als würde Stoff oder Flüssigkeit gezogen. Der Wechsel fühlt sich dadurch weich und körperlich an, nicht mechanisch.",
  "wann_einsetzen": "Bei warmen, verspielten oder lifestyle-orientierten Marken, oft in der Markenfarbe. Auch bei ruhigen Marken, wenn die Kurve zum Inhalt passt, etwa bei einem Büro, das gekrümmte Tragwerke baut.",
  "wann_nicht": "Bei technisch-kühlen oder brutalistischen Marken. Nicht auf Seiten, die oft und schnell gewechselt werden, etwa in Shops oder Dokumentationen.",
  "varianten": [
   "SVG-Pfad mit animiertem Kontrollpunkt (klassisch, z. B. mit GSAP)",
   "CSS shape() in clip-path, mit @property rein in CSS animierbar (Interop 2026)",
   "Doppelte Kurve: zwei Flächen in zwei Farben, leicht versetzt"
  ],
  "umsetzung": "SVG: ein fixiertes <svg> über der Seite mit einem <path>. Die Vorderkante ist ein quadratischer Bézier: M0 y Q50% (y - 2 × Wölbung) 100% y. Der Kontrollpunkt liegt doppelt so weit draußen wie die sichtbare Wölbung. GSAP tweent y und Wölbung, onUpdate schreibt den d-Wert neu. Gemessen bei Dennis Snellenberg: Panel rein 0,5 s, Wölbung 0 auf 10vh in 0,4 s mit power4.in; Panel raus 0,8 s, Wölbung 10vh auf 0 in 0,85 s mit power3.inOut. CSS: clip-path: shape(from 0% var(--kante), curve to 100% var(--kante) with 50% calc(var(--kante) - 2 * var(--bogen)), line to 100% var(--fuss), curve to 0% var(--fuss) with 50% calc(var(--fuss) + 2 * var(--fussbogen)), close). Die vier Variablen per @property registrieren und mit Transition oder Web Animations animieren. shape() vorher mit CSS.supports prüfen, sonst gerader inset()-Wipe. Bei echten Seitenwechseln deckt das Panel beim Klick ab, die neue Seite lädt (Barba, Swup oder Framework-Router) und das Panel gibt sie danach frei. Die Demo simuliert das mit Seitenzuständen in einer Datei.",
  "mobil": "Wölbung halb so hoch (5vh statt 10vh), weil das Hochformat sie optisch verstärkt.",
  "reduzierte_bewegung": "Keine Wölbung und keine Fahrt. Das Panel blendet kurz ein und wieder aus (gerader Fade, etwa 200 ms).",
  "barrierefreiheit": "Das Panel mit dem Seitennamen ist aria-hidden. Den Seitenwechsel über eine aria-live-Region ansagen und den Fokus nach dem Wechsel auf die neue Überschrift setzen. Der Übergang darf Klicks nicht länger als etwa 1,5 s blockieren."
 },
 "messwerte": {
  "easing": "Power4.easeIn (Wölbung auf), Power3.easeInOut (Wölbung zu)",
  "dauer_ms": "400 auf, 850 zu",
  "stagger_ms": "",
  "distanz": "Wölbung 10vh Desktop, 5vh Mobil",
  "sonstiges": "Panel selbst .5s rein, .8s raus",
  "herkunft": "beobachtet",
  "quelle": "https://dennissnellenberg.com/assets/js/index-new.js"
 },
 "kurve": {
  "bezier": [
   0.64,
   0,
   0.78,
   0
  ],
  "css": "cubic-bezier(0.64, 0, 0.78, 0)",
  "name": "power4.in",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Brand Creatives (über Usecue)",
   "url": "https://www.usecue.com/blog/page-transitions-done-right/",
   "auszeichnung": "",
   "beobachtung": "Pinker Vorhang mit gebogener Kante. Der Nachbau nutzt shape(), dessen Kontrollpunkt flach startet und sich nach außen wölbt.",
   "art": "artikel"
  },
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "'Curved Wipe' als mitgelieferte Übergangsvorlage.",
   "art": "demo"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (index-new.js): Übergangspanel mit gewölbter Kante aus .rounded-div-wrap (oben: Höhe 0 → 10vh, .4s Power4.easeIn; unten: 10vh → 0, .85s Power3.easeInOut; mobil 5vh). Die gleiche Rundung sitzt als .footer-rounded-div über dem Footer.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Page transitions done right (Usecue)",
   "url": "https://www.usecue.com/blog/page-transitions-done-right/"
  },
  {
   "titel": "Interop 2026 (shape() als Fokusbereich)",
   "url": "https://web.dev/blog/interop-2026"
  }
 ],
 "kombinierbar_mit": [
  "vorhang-farbpanel-wipe",
  "seitenname-typo-uebergang"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/gebogener-wipe-shape/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/gebogener-wipe-shape/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/gebogener-wipe-shape/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Erster Produktionsbeleg."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein dunkles Panel fährt mit gewölbter Vorderkante über die Seite und gibt die neue mit hängender Hinterkante frei.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0"
  ],
  "werte": {
   "rein_ms": 500,
   "rein_easing": "power4.in (CSS cubic-bezier(0.64, 0, 0.78, 0))",
   "woelbung_auf": "0 → 10vh in 400 ms, power4.in",
   "raus_ms": 800,
   "raus_easing": "power3.inOut (CSS cubic-bezier(0.65, 0, 0.35, 1))",
   "woelbung_zu": "10vh → 0 in 850 ms, power3.inOut",
   "woelbung_mobil": "5vh ab max-width 760px",
   "kontrollpunkt": "quadratischer Bézier, Kontrollpunkt bei 2 × Wölbung (Kurvenmitte = Wölbung)",
   "shape_variante": "rein 500 ms, raus 800 ms, Wölbung 0 → 10vh → 0 (Spitze bei 50 %), cubic-bezier(0.65, 0, 0.35, 1) für Kante und Wölbung",
   "doppelkurve": "zwei Pfade #C5C7C7 und #1F2323, Versatz 100 ms (rein: hell zuerst, raus: dunkel zuerst)",
   "halten_ms": 380,
   "seitenname": "translateY(105%) → 0 in 500 ms, cubic-bezier(0.1, 0.9, 0.3, 1)",
   "seite_mitbewegen": "alte Seite 0 → -48px mit der Vorderkante, neue Seite 48px → 0 mit der Hinterkante",
   "reduziert": "Fade 200 ms linear, Halten 380 ms",
   "farben": "Panel #1F2323, Grund #FFFFFF, Text #231F20, Meta #76767A",
   "schrift": "Hanken Grotesk 400/450 + Italic (Rezept architektur-ruhiges-raster)"
  },
  "ausloeser": "klick",
  "touch": "Wie am Desktop: Tippen auf einen Link startet den Übergang. Bis 760 px Breite ist die Wölbung mit 5vh nur halb so hoch. Die Varianten-Knöpfe sind 36 px hoch.",
  "reduziert": "Keine Wölbung, keine Bewegung: das Panel blendet in 200 ms linear ein, der Seitenname steht still, die Seite wechselt, das Panel blendet in 200 ms wieder aus.",
  "korrekturen": {
   "beschreibung": "Ein Panel fährt von unten über die Seite. Seine Vorderkante ist nicht gerade, sondern gewölbt. Die Wölbung wächst während der Fahrt. Ist die Seite bedeckt, fährt das Panel weiter nach oben und gibt die neue Seite frei. Jetzt hängt die Hinterkante nach unten durch und flacht zum Ende hin ab.",
   "warum_es_wirkt": "Die Wölbung wirkt wie Trägheit, als würde Stoff oder Flüssigkeit gezogen. Der Wechsel fühlt sich dadurch weich und körperlich an, nicht mechanisch.",
   "wann_einsetzen": "Bei warmen, verspielten oder lifestyle-orientierten Marken, oft in der Markenfarbe. Auch bei ruhigen Marken, wenn die Kurve zum Inhalt passt, etwa bei einem Büro, das gekrümmte Tragwerke baut.",
   "wann_nicht": "Bei technisch-kühlen oder brutalistischen Marken. Nicht auf Seiten, die oft und schnell gewechselt werden, etwa in Shops oder Dokumentationen.",
   "varianten": [
    "SVG-Pfad mit animiertem Kontrollpunkt (klassisch, z. B. mit GSAP)",
    "CSS shape() in clip-path, mit @property rein in CSS animierbar (Interop 2026)",
    "Doppelte Kurve: zwei Flächen in zwei Farben, leicht versetzt"
   ],
   "umsetzung": "SVG: ein fixiertes <svg> über der Seite mit einem <path>. Die Vorderkante ist ein quadratischer Bézier: M0 y Q50% (y - 2 × Wölbung) 100% y. Der Kontrollpunkt liegt doppelt so weit draußen wie die sichtbare Wölbung. GSAP tweent y und Wölbung, onUpdate schreibt den d-Wert neu. Gemessen bei Dennis Snellenberg: Panel rein 0,5 s, Wölbung 0 auf 10vh in 0,4 s mit power4.in; Panel raus 0,8 s, Wölbung 10vh auf 0 in 0,85 s mit power3.inOut. CSS: clip-path: shape(from 0% var(--kante), curve to 100% var(--kante) with 50% calc(var(--kante) - 2 * var(--bogen)), line to 100% var(--fuss), curve to 0% var(--fuss) with 50% calc(var(--fuss) + 2 * var(--fussbogen)), close). Die vier Variablen per @property registrieren und mit Transition oder Web Animations animieren. shape() vorher mit CSS.supports prüfen, sonst gerader inset()-Wipe. Bei echten Seitenwechseln deckt das Panel beim Klick ab, die neue Seite lädt (Barba, Swup oder Framework-Router) und das Panel gibt sie danach frei. Die Demo simuliert das mit Seitenzuständen in einer Datei.",
   "mobil": "Wölbung halb so hoch (5vh statt 10vh), weil das Hochformat sie optisch verstärkt.",
   "reduzierte_bewegung": "Keine Wölbung und keine Fahrt. Das Panel blendet kurz ein und wieder aus (gerader Fade, etwa 200 ms).",
   "barrierefreiheit": "Das Panel mit dem Seitennamen ist aria-hidden. Den Seitenwechsel über eine aria-live-Region ansagen und den Fokus nach dem Wechsel auf die neue Überschrift setzen. Der Übergang darf Klicks nicht länger als etwa 1,5 s blockieren."
  },
  "geprueft": "01.11.2026",
  "notiz": "Simulierter Seitenwechsel bei einem erfundenen Rostocker Architekturbüro (Ahlers Haack, Schalen- und Bogentragwerke) mit vier Seitenzuständen und eigenen SVG-Ansichten. Rezept architektur-ruhiges-raster bleibt: die Kurve passt zum Thema gekrümmter Dächer, Panel in #1F2323. Umschalter: SVG-Pfad mit GSAP (Snellenberg-Werte), CSS shape() mit @property (Wölbung kommt und geht, Fallback inset()), Doppelkurve in zwei Grautönen. Die Werte-Leiste zeigt Kante und Wölbung live. Vorführung: gedachter Zeiger klickt sich durch die Seiten und wechselt dabei die Variante. Nachgebessert: Büroname zu Ahlers Haack geändert, weil „Lüders“ schon in einer anderen Demo vorkommt. AD-Review 01.11.2026: Note 4"
 }
}