{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "progressive-blur",
 "name": "Progressiver Verlaufs-Blur",
 "name_en": "Progressive / variable blur",
 "kurz": "Inhalt taucht stufenlos unscharf unter Kopf und Warenkorb-Leiste: zehn gestapelte Backdrop-Ebenen mit wachsendem Blur und versetzten Masken.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "ruhig",
  "hochwertig",
  "filmisch"
 ],
 "technik": [
  "css",
  "backdrop-filter",
  "mask-image"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Über der Kante eines Scroll-Bereichs liegt ein Stapel absolut positionierter Ebenen, etwa unter dem Sticky-Header oder über der Bottom-Bar. Jede Ebene hat backdrop-filter: blur() mit steigendem Radius. Jede Ebene bekommt eine eigene mask-image-Maske (linear-gradient): Je stärker ihr Blur, desto früher läuft sie aus. So wird der Inhalt zur Kante hin stufenlos unschärfer, statt hart abgeschnitten zu werden. Oft liegt zusätzlich ein leichter Farbverlauf in die Seitenfarbe darüber.",
  "warum_es_wirkt": "Der Verlauf imitiert optische Tiefenunschärfe. Kanten wirken weich und hochwertig, wie man es von Apple und visionOS kennt. Der Inhalt scheint unter das Interface zu tauchen, statt an einer harten Linie zu enden.",
  "wann_einsetzen": "Unter Sticky-Headern. Über Bottom-Navigation und Warenkorb-Leisten. An den Rändern horizontaler Karussells. Über der Unterkante von Bildern mit Bildunterschrift. Radial um ein Element, das im Fokus stehen soll.",
  "wann_nicht": "Bei langen Listen auf schwachen Mobilgeräten, denn jede Backdrop-Ebene kostet Rechenzeit. Über Text, der noch gelesen werden muss. Über einfarbigem Inhalt: Dort sieht man den Blur nicht, ein Farbverlauf reicht.",
  "varianten": [
   "Gestuft an der Kante (oben, unten oder beide): mehrere Ebenen mit steigendem Blur, bei Clerk 1 bis 10 px",
   "Einlagig: eine Ebene mit festem Blur und weicher Maske, bei Raycast blur(12px) mit Maske 50 → 75 %. Günstiger, wirkt aber eher wie ein Überblenden als wie wachsende Unschärfe",
   "Radial: Vignetten-Blur um ein Fokuselement",
   "Shader-Variante mit echtem variablem Blur in WebGL"
  ],
  "umsetzung": "Ebenen per Schleife erzeugen. Bei Clerk ist jede Maske bis 40 % deckend und läuft dann aus; das Maskenende rückt in 5-%-Schritten von 100 % auf 55 %, der Blur steigt dabei 1, 1, 2, 2, 3, 4, 5, 6, 8, 10 px. Alternativ zeigt jede Maske nur ein Band (Stop i/n bis (i+2)/n), die Bänder überlappen um eine Stufe. Weniger Stufen zeigen sichtbare Bänder, mehr Stufen kosten mehr Leistung. Die Ebenen nicht in ein Element mit opacity unter 1, filter oder mask legen: Das wird zur Backdrop-Wurzel, und die Ebenen sehen den Inhalt dahinter nicht mehr. Deshalb den Stapel nicht per opacity ein- und ausblenden. Ohne backdrop-filter bleibt nur der Farbverlauf, ein eigener Fallback ist nicht nötig.",
  "mobil": "Ebenenzahl auf 3 bis 4 senken oder nur einen Farbverlauf zeigen. Die Demo nutzt auf Touch-Geräten 4 Ebenen mit 1, 3, 6 und 10 px.",
  "reduzierte_bewegung": "Der Effekt ist statisch, eine Anpassung ist nicht nötig.",
  "barrierefreiheit": "Rein dekorativ: aria-hidden=\"true\" und pointer-events: none. Kopf und Leiste über der Kante brauchen trotzdem genug Kontrast, deshalb einen Farbverlauf in die Seitenfarbe darunterlegen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Clerk: Maskenende in 5-%-Schritten von 100 % bis 55 %, Startdeckung 40 %",
  "sonstiges": "Clerk: 12 Ebenen, Blur ansteigend 1→10px+ (1,1,2,2,3,4,5,6,8,10…); Raycast einlagig blur(12px), Maske 50→75 %",
  "herkunft": "beobachtet",
  "quelle": "https://clerk.com/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Clerk",
   "url": "https://clerk.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Progressive Blur aus 12 gestapelten Ebenen: backdrop-filter blur(1px), 1px, 2px, 2px, 3px, 4px, 5px, 6px, 8px, 10px … jeweils mit mask-image linear-gradient(to bottom, deckend bis 40 %, transparent ab 100 %, 95 %, 90 % … 55 %).",
   "art": "website"
  },
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Einlagige Variante: Pseudo-Element mit backdrop-filter blur(12px) und mask-image linear-gradient(#000 50%, #0000 75%) als weiche Unschärfe-Kante.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "frosted-glass-erweitert",
  "liquid-glass-refraktion"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/progressive-blur/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/progressive-blur/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/progressive-blur/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 2 Produktionsbelege, Ebenenwerte beobachtet (ersetzen Verdopplungs-Annahme)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Inhalt taucht stufenlos unscharf unter Kopf und Warenkorb-Leiste: zehn gestapelte Backdrop-Ebenen mit wachsendem Blur und versetzten Masken.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "gestuft_ebenen": 10,
   "gestuft_blur_px": [
    1,
    1,
    2,
    2,
    3,
    4,
    5,
    6,
    8,
    10
   ],
   "gestuft_maske": "linear-gradient(to bottom, #000 0%, #000 40%, transparent E%), E je Ebene 100, 95, 90 … 55 % (unten gespiegelt: to top)",
   "gestuft_mobil_blur_px": [
    1,
    3,
    6,
    10
   ],
   "gestuft_mobil_maskenende": "100, 85, 70, 55 %",
   "einlagig": "1 Ebene, backdrop-filter: blur(12px), Maske linear-gradient(#000 50%, transparent 75%)",
   "radial_blur_px": [
    1,
    2,
    4,
    8,
    16
   ],
   "radial_maske": "radial-gradient(circle at Fokus, transparent r+i·Band, #000 r+(i+1)·Band); r 150 px, Band 64 px (mobil 3 Ebenen 2/6/14 px, r 96 px, Band 48 px); eigene Werte, nicht gemessen",
   "zone_oben_px": 168,
   "zone_unten_px": 150,
   "zone_mobil_px": "oben 132, unten 200",
   "farbverlauf_oben": "linear-gradient(to bottom, rgb(245 244 241 / .8), rgb(245 244 241 / .5) 45%, transparent)",
   "farbverlauf_unten": "linear-gradient(to top, rgb(245 244 241 / .55), transparent 70%)",
   "fokus_wechsel": "400 ms cubic-bezier(0, 0, 0.2, 1)",
   "hover_ui": "150–200 ms cubic-bezier(0, 0, 0.2, 1)",
   "vorfuehrung": "Etappen: Rollen 1200 ms (Sinus), Halten 1600 ms, erste Stelle 3000 ms; Radial: Fokuswechsel alle 1700 ms"
  },
  "ausloeser": "scroll",
  "touch": "Auf Touch-Geräten und unter 640 px nur 4 Ebenen (1, 3, 6, 10 px), untere Zone 200 px wegen Leiste und Bedienung. Radial: Fokus per Tippen auf eine Kachel.",
  "reduziert": "Der Blur bleibt, er ist statisch. Die Vorführung springt ohne Gleiten zwischen festen Stellen, der radiale Fokus wechselt ohne Übergang.",
  "korrekturen": {
   "beschreibung": "Über der Kante eines Scroll-Bereichs liegt ein Stapel absolut positionierter Ebenen, etwa unter dem Sticky-Header oder über der Bottom-Bar. Jede Ebene hat backdrop-filter: blur() mit steigendem Radius. Jede Ebene bekommt eine eigene mask-image-Maske (linear-gradient): Je stärker ihr Blur, desto früher läuft sie aus. So wird der Inhalt zur Kante hin stufenlos unschärfer, statt hart abgeschnitten zu werden. Oft liegt zusätzlich ein leichter Farbverlauf in die Seitenfarbe darüber.",
   "warum_es_wirkt": "Der Verlauf imitiert optische Tiefenunschärfe. Kanten wirken weich und hochwertig, wie man es von Apple und visionOS kennt. Der Inhalt scheint unter das Interface zu tauchen, statt an einer harten Linie zu enden.",
   "wann_einsetzen": "Unter Sticky-Headern. Über Bottom-Navigation und Warenkorb-Leisten. An den Rändern horizontaler Karussells. Über der Unterkante von Bildern mit Bildunterschrift. Radial um ein Element, das im Fokus stehen soll.",
   "wann_nicht": "Bei langen Listen auf schwachen Mobilgeräten, denn jede Backdrop-Ebene kostet Rechenzeit. Über Text, der noch gelesen werden muss. Über einfarbigem Inhalt: Dort sieht man den Blur nicht, ein Farbverlauf reicht.",
   "varianten": [
    "Gestuft an der Kante (oben, unten oder beide): mehrere Ebenen mit steigendem Blur, bei Clerk 1 bis 10 px",
    "Einlagig: eine Ebene mit festem Blur und weicher Maske, bei Raycast blur(12px) mit Maske 50 → 75 %. Günstiger, wirkt aber eher wie ein Überblenden als wie wachsende Unschärfe",
    "Radial: Vignetten-Blur um ein Fokuselement",
    "Shader-Variante mit echtem variablem Blur in WebGL"
   ],
   "umsetzung": "Ebenen per Schleife erzeugen. Bei Clerk ist jede Maske bis 40 % deckend und läuft dann aus; das Maskenende rückt in 5-%-Schritten von 100 % auf 55 %, der Blur steigt dabei 1, 1, 2, 2, 3, 4, 5, 6, 8, 10 px. Alternativ zeigt jede Maske nur ein Band (Stop i/n bis (i+2)/n), die Bänder überlappen um eine Stufe. Weniger Stufen zeigen sichtbare Bänder, mehr Stufen kosten mehr Leistung. Die Ebenen nicht in ein Element mit opacity unter 1, filter oder mask legen: Das wird zur Backdrop-Wurzel, und die Ebenen sehen den Inhalt dahinter nicht mehr. Deshalb den Stapel nicht per opacity ein- und ausblenden. Ohne backdrop-filter bleibt nur der Farbverlauf, ein eigener Fallback ist nicht nötig.",
   "mobil": "Ebenenzahl auf 3 bis 4 senken oder nur einen Farbverlauf zeigen. Die Demo nutzt auf Touch-Geräten 4 Ebenen mit 1, 3, 6 und 10 px.",
   "reduzierte_bewegung": "Der Effekt ist statisch, eine Anpassung ist nicht nötig.",
   "barrierefreiheit": "Rein dekorativ: aria-hidden=\"true\" und pointer-events: none. Kopf und Leiste über der Kante brauchen trotzdem genug Kontrast, deshalb einen Farbverlauf in die Seitenfarbe darunterlegen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Blaufeld, erfundene Granola-Manufaktur aus Ulm (Rezept d2c-produkt-zuerst: Young Serif nur für Claims, Instrument Sans für UI, Preise mit Tabellenziffern, eigene SVG-Beutel mit Etikett-Mustern). Umschalter: Gestuft (Clerk-Werte), Einlagig (Raycast), Radial (eigene Werte, Fokus folgt Hover bzw. Tippen). „Ebenen zeigen“ färbt jede Ebene ein. Die gepunkteten Hero-Ränder machen die wachsende Unschärfe sichtbar. Clerk nutzt laut Beobachtung 12 Ebenen; belegt sind 10 Werte, die Demo nutzt genau diese. Variantenwechsel ohne Überblendung, weil opacity am Elternelement eine Backdrop-Wurzel erzeugt. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Dekorative SVG-Icons (Kopf, Warenkorb, Sterne, Herz) mit aria-hidden (21 Treffer svg-img-alt), Sale-Badge --sale #eb5c9d → #c93c7f (Weiß 4,7:1), Kontrastmodus-Rahmen für Knöpfe."
 }
}