{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "schwebende-pill-navigation",
 "name": "Schwebende Pill-Navigation mit Glas bzw. Progressive Blur",
 "name_en": "Floating pill navbar / glass nav",
 "kurz": "Die Navigation schwebt als Glaskapsel über dem Inhalt, wird beim Scrollen schmaler und nimmt die Farbe des Abschnitts darunter an.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "modern",
  "leicht",
  "technisch",
  "ruhig"
 ],
 "technik": [
  "css",
  "backdrop-filter",
  "mask-image",
  "scroll-driven-css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Die Navigation ist keine volle Leiste, sondern eine abgelöste Kapsel mit Abstand zum Rand, oben oder unten mittig, mit border-radius 999px. 2) Die Fläche ist halbtransparent und mit backdrop-filter unscharf und gesättigt. Eine feine 1px-Innenkante mit niedriger Deckkraft erzeugt den Glaseindruck. 3) Beim Scrollen wird die Kapsel schmaler: Wortmarke und CTA-Text klappen weg. 4) Ihre Farbe folgt dem Abschnitt, der gerade unter ihr liegt. 5) Ein gleitender Indikator markiert den aktiven Punkt. 6) Variante ohne Kapsel: Progressive Blur, bei dem die Unschärfe zum Rand hin in mehreren Stufen zunimmt.",
  "warum_es_wirkt": "Die Kapsel wirkt leicht und schwebend und bündelt die Navigation in einem klaren Objekt. Der Inhalt bleibt unter ihr sichtbar, die Seite wirkt dadurch größer. Das Material knüpft an Apples Liquid Glass (seit 2025) an und liest sich deshalb sofort als zeitgemäß.",
  "wann_einsetzen": "Landingpages, SaaS, Studios und Portfolios mit drei bis sechs Punkten. Auf dem Telefon als Dock unten.",
  "wann_nicht": "Wenn der Kontrast über wechselnden Bildern nicht sicher ist. Bei vielen Menüpunkten oder tiefen Menüs. Bei einer brutalen oder flachen Marke: dort wirkt Glas generisch.",
  "varianten": [
   "Oben mittig, beim Scrollen schmaler werdend (diese Demo, „Glas oben“)",
   "Unten mittig als Dock, auf dem Telefon in der Daumenzone (diese Demo, „Dock unten“)",
   "Progressive Blur statt Glaskapsel mit 8 gestaffelten Unschärfe-Ebenen (diese Demo)",
   "Farbwechsel je Abschnitt über data-thema der Sektion unter der Pille (in allen drei Varianten aktiv)"
  ],
  "umsetzung": "position: fixed; inset-inline: 0; margin-inline: auto; width: fit-content; border-radius: 999px; background-color: color-mix(in oklab, var(--grund) 60%, transparent); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12). Antinomy nutzt deckender 80 % Fläche mit blur(12px) und wechselt die Farbe mit 300 ms.\n\nSchmaler werden: Wortmarke und CTA-Text in einem Grid mit grid-template-columns 1fr, im kompakten Zustand 0fr. So animiert die Breite ohne feste Pixelwerte. Den Zustand setzt eine Scroll-Schwelle (hier 40px) oder CSS mit animation-timeline: scroll() bzw. scroll-state(stuck).\n\nProgressive Blur: 8 überlagerte Ebenen mit backdrop-filter 0,5 / 1 / 2 / 4 / 8 / 16 / 32 / 64 px. Jede Ebene bekommt eine linear-gradient-Maske über ein Band von 37,5 % mit 12,5 % Überlappung, pointer-events: none. Darüber eine Tönung in der Grundfarbe für den Kontrast.\n\nFallstricke: backdrop-filter braucht sichtbaren Inhalt dahinter, über einfarbiger Fläche sieht man nichts. Ohne Unterstützung (@supports not) eine fast deckende Fläche verwenden. Kontrast mit höherer Deckkraft absichern. Ein Indikator-Element gehört nicht direkt in die ul, sondern daneben in einen gemeinsamen, positionierten Rahmen.",
  "mobil": "Unten mittig in die Daumenzone setzen und env(safe-area-inset-bottom) addieren. Links mindestens 44px hoch. Wortmarke und CTA weglassen, wenn die Breite nicht reicht. Für Progressive Blur 4 statt 8 Ebenen.",
  "reduzierte_bewegung": "Keine Breitenänderung beim Scrollen, die Pille bleibt statisch offen. Der Indikator springt. Bei prefers-reduced-transparency eine deckende Fläche ohne backdrop-filter.",
  "barrierefreiheit": "Kontrast von mindestens 4,5:1 über allen Hintergründen prüfen, auch über Bildern. aria-current am aktiven Link. Glas und Indikator nie als einzigen Zustandshinweis nutzen; der aktive Link wird zusätzlich fetter. Das CTA-Symbol braucht im kompakten Zustand ein aria-label. Sichtbarer Fokusrahmen auf allen Links."
 },
 "messwerte": {
  "easing": "ease-out bzw. cubic-bezier(.2,.8,.2,1) für Breitenänderung",
  "dauer_ms": "300 (Farbwechsel, Antinomy)",
  "stagger_ms": "",
  "distanz": "Abstand zum Rand = var(--gap); Radius 19px (Antinomy)",
  "sonstiges": "Glas: Hintergrund 80 % + backdrop-blur-md; Progressive Blur bei Clerk in Ebenen 1–2 px mit Maskenverlauf",
  "herkunft": "beobachtet",
  "quelle": "https://www.antinomy.studio/"
 },
 "kurve": {
  "bezier": [
   0.2,
   0.8,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.2, 0.8, 0.2, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 500
 },
 "gesehen_bei": [
  {
   "seite": "Pixelmatters: UI-Design-Trends 2026",
   "url": "https://pixelmatters.com/insights/7-UI-design-trends-to-watch-in-2026",
   "auszeichnung": "",
   "beobachtung": "Liquid Glass als Trend Nr. 1 gelistet; transluzente Ebenen zur Hierarchie.",
   "art": "artikel"
  },
  {
   "seite": "Framer Marketplace: Floating Pill Navbar",
   "url": "https://www.framer.com/marketplace/components/floating-pill-navbar/",
   "auszeichnung": "",
   "beobachtung": "Eine von vielen Pill-Nav-Komponenten (auch Liquid Glass Nav, Navbar Scroll Pill) – Indiz für starke Verbreitung.",
   "art": "demo"
  },
  {
   "seite": "Framer Marketplace: Liquid Glass Nav",
   "url": "https://www.framer.com/marketplace/components/liquid-glass-nav/",
   "auszeichnung": "",
   "beobachtung": "Glas-Navigation als fertige Komponente.",
   "art": "demo"
  },
  {
   "seite": "Apple: New design gallery 2026 (Liquid Glass)",
   "url": "https://developer.apple.com/design/new-design-gallery-2026",
   "auszeichnung": "",
   "beobachtung": "Referenz für das Material, das im Web nachgeahmt wird.",
   "art": "artikel"
  },
  {
   "seite": "Antinomy Studio",
   "url": "https://www.antinomy.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Header fixed mit Abstand var(--gap), Kapsel border-radius 19px, border (--foreground)/5, bg (--background)/80 + backdrop-blur-md, Breite calc(100% - gap×2) bzw. 1200px, transition-colors 300ms.",
   "art": "website"
  },
  {
   "seite": "Nothing",
   "url": "https://nothing.tech/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): schwebende, zentrierte Box (fixed, left-1/2, p-2) mit Klasse frost-white-intense, rounded-lg, max-w-xl, Höhe 48px.",
   "art": "website"
  },
  {
   "seite": "Clerk",
   "url": "https://clerk.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Header sticky top-2 mit Progressive Blur – gestapelte Ebenen backdrop-filter blur(1px), blur(1px), blur(2px) … jeweils mit mask-image linear-gradient(to bottom, … 40%, transparent 100/95/90 %).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Josh W. Comeau: Next-level frosted glass with backdrop-filter",
   "url": "https://joshwcomeau.com/css/backdrop-filter"
  },
  {
   "titel": "MengTo Skill: Progressive Blur",
   "url": "https://tessl.io/registry/skills/github/MengTo/Skills/progressive-blur"
  }
 ],
 "kombinierbar_mit": [
  "gleitender-indikator",
  "hide-on-scroll-header",
  "kompakte-expandierende-navigation",
  "mobile-bottom-navigation"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/schwebende-pill-navigation/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/schwebende-pill-navigation/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/schwebende-pill-navigation/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Drei Produktionsbelege."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Navigation schwebt als Glaskapsel über dem Inhalt, wird beim Scrollen schmaler und nimmt die Farbe des Abschnitts darunter an.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "glas": "background-color: color-mix(in oklab, Grund 60 %, transparent) · backdrop-filter: blur(16px) saturate(1.4)",
   "kante": "inset 0 0 0 1px (hell rgba(20,20,19,.07) · dunkel rgba(255,255,255,.12) · blau rgba(255,255,255,.2)) + Lichtkante inset 0 1px 0 · Schatten 0 10px 32px -14px rgba(0,0,0,.32)",
   "form": "border-radius 999px · Innenabstand 6px (kompakt 4px) · Linkhöhe 40px (kompakt 34px, Touch 44/40px)",
   "abstand": "16px zum Rand (unter 560px 12px) · Dock: bottom calc(16px + env(safe-area-inset-bottom))",
   "kompakt": "ab 40px Scroll: Wortmarke und CTA-Text klappen per grid-template-columns 1fr → 0fr weg",
   "easing": "Breite cubic-bezier(0.2, 0.8, 0.2, 1) · Farbe cubic-bezier(0, 0, 0.58, 1) (ease-out)",
   "dauer_ms": "Breite und Indikator 500 · Farbwechsel 300 · Ausblenden der Klappteile 300",
   "indikator": "Fläche Text 11 % · folgt dem aktiven Link (translateX und width)",
   "farbwechsel": "data-thema des Abschnitts unter der Pillenmitte (hell, dunkel, blau)",
   "aktiv": "letzter Abschnitt, dessen Oberkante über 45 % der Fensterhöhe liegt; am Seitenende der letzte",
   "progressive_blur": "8 Ebenen blur 0,5 / 1 / 2 / 4 / 8 / 16 / 32 / 64 px · Masken je 37,5 % mit 12,5 % Überlappung · Höhe 136px · Tönung Grund 72 % → 30 % (55 %) → 0 %",
   "progressive_blur_mobil": "4 Ebenen 2 / 6 / 16 / 40 px · Masken je 75 % mit 25 % Versatz · Höhe 104px"
  },
  "ausloeser": "scroll",
  "touch": "Auf Touch-Geräten und unter 560px startet die Demo mit dem Dock unten in der Daumenzone. Links 44px hoch, Wortmarke und CTA entfallen, die vier Punkte passen in 358px.",
  "reduziert": "Kein Schrumpfen: die Pille bleibt im offenen Zustand. Der Indikator springt ohne Gleiten. Farben wechseln in 150 ms. Die Vorführung springt von Abschnitt zu Abschnitt statt zu gleiten. Bei prefers-reduced-transparency wird die Fläche deckend.",
  "korrekturen": {
   "beschreibung": "1) Die Navigation ist keine volle Leiste, sondern eine abgelöste Kapsel mit Abstand zum Rand, oben oder unten mittig, mit border-radius 999px. 2) Die Fläche ist halbtransparent und mit backdrop-filter unscharf und gesättigt. Eine feine 1px-Innenkante mit niedriger Deckkraft erzeugt den Glaseindruck. 3) Beim Scrollen wird die Kapsel schmaler: Wortmarke und CTA-Text klappen weg. 4) Ihre Farbe folgt dem Abschnitt, der gerade unter ihr liegt. 5) Ein gleitender Indikator markiert den aktiven Punkt. 6) Variante ohne Kapsel: Progressive Blur, bei dem die Unschärfe zum Rand hin in mehreren Stufen zunimmt.",
   "warum_es_wirkt": "Die Kapsel wirkt leicht und schwebend und bündelt die Navigation in einem klaren Objekt. Der Inhalt bleibt unter ihr sichtbar, die Seite wirkt dadurch größer. Das Material knüpft an Apples Liquid Glass (seit 2025) an und liest sich deshalb sofort als zeitgemäß.",
   "wann_einsetzen": "Landingpages, SaaS, Studios und Portfolios mit drei bis sechs Punkten. Auf dem Telefon als Dock unten.",
   "wann_nicht": "Wenn der Kontrast über wechselnden Bildern nicht sicher ist. Bei vielen Menüpunkten oder tiefen Menüs. Bei einer brutalen oder flachen Marke: dort wirkt Glas generisch.",
   "varianten": [
    "Oben mittig, beim Scrollen schmaler werdend (diese Demo, „Glas oben“)",
    "Unten mittig als Dock, auf dem Telefon in der Daumenzone (diese Demo, „Dock unten“)",
    "Progressive Blur statt Glaskapsel mit 8 gestaffelten Unschärfe-Ebenen (diese Demo)",
    "Farbwechsel je Abschnitt über data-thema der Sektion unter der Pille (in allen drei Varianten aktiv)"
   ],
   "umsetzung": "position: fixed; inset-inline: 0; margin-inline: auto; width: fit-content; border-radius: 999px; background-color: color-mix(in oklab, var(--grund) 60%, transparent); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12). Antinomy nutzt deckender 80 % Fläche mit blur(12px) und wechselt die Farbe mit 300 ms.\n\nSchmaler werden: Wortmarke und CTA-Text in einem Grid mit grid-template-columns 1fr, im kompakten Zustand 0fr. So animiert die Breite ohne feste Pixelwerte. Den Zustand setzt eine Scroll-Schwelle (hier 40px) oder CSS mit animation-timeline: scroll() bzw. scroll-state(stuck).\n\nProgressive Blur: 8 überlagerte Ebenen mit backdrop-filter 0,5 / 1 / 2 / 4 / 8 / 16 / 32 / 64 px. Jede Ebene bekommt eine linear-gradient-Maske über ein Band von 37,5 % mit 12,5 % Überlappung, pointer-events: none. Darüber eine Tönung in der Grundfarbe für den Kontrast.\n\nFallstricke: backdrop-filter braucht sichtbaren Inhalt dahinter, über einfarbiger Fläche sieht man nichts. Ohne Unterstützung (@supports not) eine fast deckende Fläche verwenden. Kontrast mit höherer Deckkraft absichern. Ein Indikator-Element gehört nicht direkt in die ul, sondern daneben in einen gemeinsamen, positionierten Rahmen.",
   "mobil": "Unten mittig in die Daumenzone setzen und env(safe-area-inset-bottom) addieren. Links mindestens 44px hoch. Wortmarke und CTA weglassen, wenn die Breite nicht reicht. Für Progressive Blur 4 statt 8 Ebenen.",
   "reduzierte_bewegung": "Keine Breitenänderung beim Scrollen, die Pille bleibt statisch offen. Der Indikator springt. Bei prefers-reduced-transparency eine deckende Fläche ohne backdrop-filter.",
   "barrierefreiheit": "Kontrast von mindestens 4,5:1 über allen Hintergründen prüfen, auch über Bildern. aria-current am aktiven Link. Glas und Indikator nie als einzigen Zustandshinweis nutzen; der aktive Link wird zusätzlich fetter. Das CTA-Symbol braucht im kompakten Zustand ein aria-label. Sichtbarer Fokusrahmen auf allen Links."
  },
  "geprueft": "31.10.2026",
  "notiz": "Studioseite (erfundenes Studio Feldweg) mit hellen, dunklen und blauen Abschnitten. Umschalter für drei Varianten: Glas oben, Dock unten, Progressive Blur. In allen Varianten schrumpft die Pille ab 40px Scroll, folgt der Farbe des Abschnitts und hat einen gleitenden Indikator (Scrollspy). Die Vorführung gleitet von Halt zu Halt (Bilder unter dem Glas, dunkles Studio, blauer Kontakt) und wechselt je Runde die Variante. Ohne Bibliothek; Bilder sind eigene Arbeiten aus lab/fundus/medien. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --l im hellen Thema .56 → .64 (5,2:1), Tastaturfokus ohne Smooth-Scroll (:root:has(:focus-visible) scroll-behavior auto, Fokus landete sonst außerhalb des Bildes), Arbeiten-Raster minmax(0, 1fr), h1-Minimum 28 px, unter 360 px schmalere Pillenpunkte und umbrechende Projekttitel, Kontrastmodus-Rahmen für Knöpfe."
 }
}