{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kompakte-expandierende-navigation",
 "name": "Kompakte, expandierende Insel-Navigation",
 "name_en": "Compact expanding navigation (morphing menu card / dynamic island nav)",
 "kurz": "Die Pille mit Logo und „Menü“ wächst selbst zur Karte: erst die Form, dann der Inhalt, der Hintergrund verschwimmt.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "modern",
  "ruhig",
  "hochwertig",
  "technisch"
 ],
 "technik": [
  "css",
  "gsap",
  "flip",
  "view-transitions",
  "backdrop-filter"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Geschlossen ist die Navigation eine kleine, abgerundete Insel mit Logo und „Menü“. Beim Öffnen wächst genau dieses Element in Breite und Höhe zur Karte, statt ein separates Overlay einzublenden. Die Ecken bleiben rund. Der Seitenhintergrund wird weichgezeichnet und leicht abgedunkelt. Links, Teaser und CTA blenden erst ein, wenn die Form fast steht. In der zweistufigen Form wächst zuerst die Breite, dann die Höhe. Beim Schließen verschwindet zuerst der Inhalt, dann zieht sich die Karte zurück.",
  "warum_es_wirkt": "Objektkonstanz: Man sieht, dass das Menü aus dem Knopf herauswächst. Das ist räumlich verständlich und wirkt hochwertig, ähnlich wie Apples Dynamic Island. Anders als beim Vollbild-Overlay bleibt die Seite als Kontext sichtbar.",
  "wann_einsetzen": "Marken-, Studio- und Produktseiten mit 4 bis 8 Links plus Teaser. Wenn der Hero nicht ganz verdeckt werden soll.",
  "wann_nicht": "Bei sehr vielen Links oder Unterebenen. Und wenn keine Zeit für sorgfältiges Timing bleibt: Schlecht getimt wirkt der Morph billig.",
  "varianten": [
   "Ecke: Die Insel sitzt oben rechts und öffnet zur Karte nach links unten (Codrops-Kuration „Compact Navigation“, z. B. VNTNR, Vendredi Society).",
   "Mitte: Eine zentrierte Leiste wächst symmetrisch in Breite und Höhe (Osmo „Centered Scaling Navigation Bar“).",
   "Zweistufig: Erst wird die Pille breit, dann klappt die Karte nach unten auf (Osmo „Two-step Scaling Navigation“).",
   "Dynamic-Island-Stil: Die Insel wechselt ihren Inhalt je nach Scroll-Kontext."
  ],
  "umsetzung": "Ein Container mit festem Anker (top/right) in Zielgröße. Geschlossen schneidet clip-path: inset(0 var(--r) var(--b) var(--l) round 26px) nur die Pille heraus, offen ist inset(0 round 22px). Die Kanten als @property registrieren, dann lassen sich Breite und Höhe getrennt per CSS-Transition timen. clip-path beschneidet auch die Klickfläche, die geschlossene Karte blockiert also nichts. Die Kopfzeile folgt den Kanten per padding, so bleiben Logo und Knopf immer sichtbar und verzerren nicht. Kein scale auf Textcontainer. Inhalt separat mit Verzögerung und Stagger einblenden. Schatten per filter: drop-shadow auf einer Hülle, weil box-shadow mitgeschnitten wird. Hintergrund: eigenes Element mit backdrop-filter: blur(8–16px) und Opacity-Fade. Alternativen: GSAP Flip (messen, Klasse wechseln, Flip.from) oder eine same-document View Transition mit view-transition-name auf dem Container. backdrop-filter auf großen Flächen ist auf schwachen Geräten teuer.",
  "mobil": "Die Karte wächst auf fast volle Breite (16 px Rand) und höchstens 85svh Höhe, innen scrollbar. Auf schwachen Geräten den Blur durch reine Abdunklung ersetzen.",
  "reduzierte_bewegung": "Kein Morph: Die Karte erscheint an Zielgröße per kurzem Fade. Der Blur bleibt.",
  "barrierefreiheit": "Knopf mit aria-expanded und aria-controls. Die Karte als Disclosure oder Popover (popover=auto bringt Light-Dismiss und Escape mit). Beim Öffnen Fokus auf den ersten Link, beim Schließen zurück auf den Knopf. Escape und Klick auf den Hintergrund schließen. Die übrige Seite ist inert, solange die Karte offen ist. Den Zustand nicht nur über die Form zeigen: Das Label wechselt zu „Schließen“."
 },
 "messwerte": {
  "easing": "expo.out bzw. cubic-bezier(0.16, 1, 0.3, 1) für den Morph; Inhalt power2.out",
  "dauer_ms": "Morph 500–700; Inhalt 300 mit 200–300 Verzögerung; Schließen 300–400",
  "stagger_ms": "30–50 für Links",
  "distanz": "Inhalt 8–16 px Versatz nach oben",
  "sonstiges": "Blur 8–16 px, Abdunklung 20–40 %",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "Codrops: Recent Design Finds – Compact Navigation",
   "url": "https://tympanus.net/codrops/2024/04/28/recent-design-finds-compact-navigation/",
   "auszeichnung": "Codrops-Kuration 04/2024",
   "beobachtung": "15 Seiten mit Menüs, die in Boxen oder Formen aufgehen, teils mit geblurrtem Hintergrund; Favorit der Autorin: VNTNR.",
   "art": "artikel"
  },
  {
   "seite": "VNTNR",
   "url": "https://www.vntnr.co/",
   "auszeichnung": "",
   "beobachtung": "Laut Codrops-Kuration Favorit für kompakte Navigation (Seite selbst für Abruf gesperrt).",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Vendredi Society",
   "url": "https://vendredi-society.com/",
   "auszeichnung": "",
   "beobachtung": "In der Codrops-Kuration als kompakte Navigation gelistet.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Osmo: Two-step Scaling Navigation",
   "url": "https://www.osmo.supply/resource/two-step-scaling-navigation",
   "auszeichnung": "Osmo-Ressource",
   "beobachtung": "Nur Titel in der Osmo-Collection gesehen.",
   "art": "demo"
  },
  {
   "seite": "Framer Marketplace: Dynamic Island Nav",
   "url": "https://www.framer.com/marketplace/components/dynamic-island-nav/",
   "auszeichnung": "",
   "beobachtung": "Komponente zeigt die Verbreitung im No-Code-Bereich (Indiz für Mainstream-Aufstieg).",
   "art": "demo"
  },
  {
   "seite": "Nothing",
   "url": "https://nothing.tech/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Header fixed, zentriert, max-w-xl; innere Box .frost-white-intense rounded-lg mit min-h-12, flex-col und overflow-y-auto, Starthöhe 48px – das Menü klappt innerhalb dieser Box auf.",
   "art": "website"
  },
  {
   "seite": "Antinomy Studio",
   "url": "https://www.antinomy.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 2n3oh8qenltph.js): Motion-Layout-Animation – Hintergrund w-[2.2rem] (Kreis) wächst auf w-auto, wenn das Element aktiv ist, borderRadius 22, Label erscheint als motion.span layout.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Recent Design Finds – Compact Navigation",
   "url": "https://tympanus.net/codrops/2024/04/28/recent-design-finds-compact-navigation/"
  },
  {
   "titel": "Osmo Collection (Navigation-Kategorie)",
   "url": "https://www.osmo.supply/collection"
  }
 ],
 "kombinierbar_mit": [
  "schwebende-pill-navigation",
  "menue-choreografie-wipe-clip",
  "native-popover-dropdowns"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/kompakte-expandierende-navigation/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/kompakte-expandierende-navigation/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/kompakte-expandierende-navigation/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei Produktionsbelege; Werte der Expansion stecken in Motion-Defaults, daher keine neuen Messwerte."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Pille mit Logo und „Menü“ wächst selbst zur Karte: erst die Form, dann der Inhalt, der Hintergrund verschwimmt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing_morph": "expo.out cubic-bezier(0.16, 1, 0.3, 1)",
   "easing_inhalt": "power2.out cubic-bezier(0.33, 1, 0.68, 1)",
   "dauer_ms": {
    "morph_auf": 600,
    "morph_zu": 350,
    "morph_zu_verzoegerung": 100,
    "inhalt_ein": 300,
    "inhalt_verzoegerung": 240,
    "inhalt_aus": 150,
    "knopf_ui": 150,
    "icon_morph": 400
   },
   "zweistufig_ms": {
    "breite": 400,
    "hoehe": 600,
    "hoehe_ab": 250,
    "inhalt_ab": 450,
    "zu_hoehe": 300,
    "zu_hoehe_ab": 100,
    "zu_breite": 300,
    "zu_breite_ab": 250
   },
   "stagger_ms": 40,
   "distanz": "Inhalt 12 px von unten",
   "pille": "Höhe 52 px, Breite = Logo + Knopf (gemessen), Radius 26 px; Variante Mitte 64 px breiter",
   "karte": "min(640px, 100vw - 32px), Radius 22 px, Abstand zum Rand 20 px (Telefon 16 px), max. 85svh",
   "technik": "clip-path: inset(0 var(--r) var(--b) var(--l) round var(--rund)) mit @property-Variablen; Kopfzeile folgt per padding den Kanten",
   "schleier": "backdrop-filter: blur(12px), Abdunklung rgba(15,29,46,.3); Touch-Telefon nur Abdunklung .4",
   "schatten": "filter: drop-shadow(0 14px 32px rgba(15,29,46,.24)) auf der Hülle"
  },
  "ausloeser": "klick",
  "touch": "Tippen öffnet und schließt wie Klick. Auf Telefonen fast volle Breite (16 px Rand), max. 85svh, intern scrollbar; ohne Hover keine Link-Dämpfung und nur Abdunklung (40 %) statt Blur.",
  "reduziert": "Kein Morph und kein Versatz: Die Karte bzw. die Pille erscheint sofort an Zielgröße per Fade (150 ms linear). Blur und Abdunklung bleiben, sie blenden nur in 150 ms ein.",
  "korrekturen": {
   "beschreibung": "Geschlossen ist die Navigation eine kleine, abgerundete Insel mit Logo und „Menü“. Beim Öffnen wächst genau dieses Element in Breite und Höhe zur Karte, statt ein separates Overlay einzublenden. Die Ecken bleiben rund. Der Seitenhintergrund wird weichgezeichnet und leicht abgedunkelt. Links, Teaser und CTA blenden erst ein, wenn die Form fast steht. In der zweistufigen Form wächst zuerst die Breite, dann die Höhe. Beim Schließen verschwindet zuerst der Inhalt, dann zieht sich die Karte zurück.",
   "warum_es_wirkt": "Objektkonstanz: Man sieht, dass das Menü aus dem Knopf herauswächst. Das ist räumlich verständlich und wirkt hochwertig, ähnlich wie Apples Dynamic Island. Anders als beim Vollbild-Overlay bleibt die Seite als Kontext sichtbar.",
   "wann_einsetzen": "Marken-, Studio- und Produktseiten mit 4 bis 8 Links plus Teaser. Wenn der Hero nicht ganz verdeckt werden soll.",
   "wann_nicht": "Bei sehr vielen Links oder Unterebenen. Und wenn keine Zeit für sorgfältiges Timing bleibt: Schlecht getimt wirkt der Morph billig.",
   "varianten": [
    "Ecke: Die Insel sitzt oben rechts und öffnet zur Karte nach links unten (Codrops-Kuration „Compact Navigation“, z. B. VNTNR, Vendredi Society).",
    "Mitte: Eine zentrierte Leiste wächst symmetrisch in Breite und Höhe (Osmo „Centered Scaling Navigation Bar“).",
    "Zweistufig: Erst wird die Pille breit, dann klappt die Karte nach unten auf (Osmo „Two-step Scaling Navigation“).",
    "Dynamic-Island-Stil: Die Insel wechselt ihren Inhalt je nach Scroll-Kontext."
   ],
   "umsetzung": "Ein Container mit festem Anker (top/right) in Zielgröße. Geschlossen schneidet clip-path: inset(0 var(--r) var(--b) var(--l) round 26px) nur die Pille heraus, offen ist inset(0 round 22px). Die Kanten als @property registrieren, dann lassen sich Breite und Höhe getrennt per CSS-Transition timen. clip-path beschneidet auch die Klickfläche, die geschlossene Karte blockiert also nichts. Die Kopfzeile folgt den Kanten per padding, so bleiben Logo und Knopf immer sichtbar und verzerren nicht. Kein scale auf Textcontainer. Inhalt separat mit Verzögerung und Stagger einblenden. Schatten per filter: drop-shadow auf einer Hülle, weil box-shadow mitgeschnitten wird. Hintergrund: eigenes Element mit backdrop-filter: blur(8–16px) und Opacity-Fade. Alternativen: GSAP Flip (messen, Klasse wechseln, Flip.from) oder eine same-document View Transition mit view-transition-name auf dem Container. backdrop-filter auf großen Flächen ist auf schwachen Geräten teuer.",
   "mobil": "Die Karte wächst auf fast volle Breite (16 px Rand) und höchstens 85svh Höhe, innen scrollbar. Auf schwachen Geräten den Blur durch reine Abdunklung ersetzen.",
   "reduzierte_bewegung": "Kein Morph: Die Karte erscheint an Zielgröße per kurzem Fade. Der Blur bleibt.",
   "barrierefreiheit": "Knopf mit aria-expanded und aria-controls. Die Karte als Disclosure oder Popover (popover=auto bringt Light-Dismiss und Escape mit). Beim Öffnen Fokus auf den ersten Link, beim Schließen zurück auf den Knopf. Escape und Klick auf den Hintergrund schließen. Die übrige Seite ist inert, solange die Karte offen ist. Den Zustand nicht nur über die Form zeigen: Das Label wechselt zu „Schließen“."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: erfundene Kaffeerösterei mit Onlineshop „Hafenrösterei, Kiel“ nach Rezept d2c-produkt-zuerst (Young Serif nur für Claim, Marke und Saison-Teaser, Instrument Sans für UI, Preise mit Tabellenziffern; kühles Nebelgrau statt Beige, Fördeblau, Bojen-Orange, Seegrün). Startseite mit Kategorie-Bento (Espresso, Abo, Filter) und Bestsellern mit Grundpreis; alle Bilder sind eigene SVG-Kaffeetüten, Bohnen und Wellen. Technik unverändert: Die Insel ist eine Karte in Zielgröße, deren clip-path-Kanten (@property) animiert werden, also reines CSS ohne Bibliothek; JS misst nur die Pillenbreite und schaltet Zustand, Fokus und inert. Umschalter Ecke / Mitte / Zweistufig, die Werte stehen in der Leiste. Die Vorführung öffnet, fährt über die Links, schließt und wechselt jede Runde die Variante. Zugang 02.11.2026: --leise Alpha .6 auf .66 (5,4:1), Bewertungssterne #B74522 statt Bojen-Orange (4,6:1), Hülle der Insel pointer-events none (nur die sichtbare Pille fängt Zeiger, Fokus nicht mehr verdeckt), Produktraster minmax(0,1fr) mit Umbruch (kein Querscrollen bei 320 px), Kontrastmodus: Knopfrahmen und Fokus als Highlight-Outline."
 }
}