{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "dock-vergroesserung",
 "name": "Dock-Navigation mit Vergrößerung",
 "name_en": "macOS-style dock magnification nav",
 "kurz": "Das Modul-Dock einer Planungs-App wächst unter dem Zeiger mit Kosinus-Falloff, die Nachbarn weichen aus, ein Tooltip mit Tastenkürzel sitzt über dem größten Icon.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "C",
 "trendstatus": "abklingend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "technisch",
  "vertraut"
 ],
 "technik": [
  "gsap",
  "vanilla-js",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine Leiste mit Icons, meist unten mittig. Nähert sich der Zeiger, wächst das Icon darunter am stärksten, die Nachbarn mit zunehmendem Abstand schwächer (Falloff). Die Leiste wächst mit. Verlässt der Zeiger die Leiste, kehren alle weich zur Ausgangsgröße zurück. Über dem vergrößerten Icon steht ein Tooltip mit Label.",
  "warum_es_wirkt": "Verspielt, taktil und sofort vertraut, weil jeder das Dock von macOS kennt.",
  "wann_einsetzen": "Persönliche Portfolios, Spielwiesen, Tool-Sammlungen und Labs.",
  "wann_nicht": "Bei seriösen Marken. Auf Touch-Geräten, dort fehlt der Zeiger. Wenn Icons ohne Label unverständlich sind. 2026 wirkt der Effekt zunehmend wie ein Template.",
  "varianten": [
   "Icons mit Label-Tooltip",
   "Abschnitts-Dock (Abschnitte statt Apps)",
   "Glas-Dock mit backdrop-filter"
  ],
  "umsetzung": "Bei pointermove für jedes Icon die waagerechte Distanz zum Zeiger berechnen: scale = 1 + (maxScale − 1) × max(0, 1 − d / radius), weicher mit Kosinus-Falloff. Die Werte per gsap.quickTo nachführen. Sollen die Nachbarn ausweichen, Breite und Höhe statt scale animieren. Fallstrick Layout-Thrashing: die Ruhe-Positionen einmal messen und nur bei resize neu.",
  "mobil": "Keine Vergrößerung. Statische Leiste mit Labels.",
  "reduzierte_bewegung": "Keine Vergrößerung, nur Hover- und Fokus-Fläche.",
  "barrierefreiheit": "Icons brauchen zugängliche Namen. Der Tooltip erscheint auch bei Tastaturfokus. Die Vergrößerung darf Trefferflächen nicht verschieben, während man klickt."
 },
 "messwerte": {
  "easing": "power3.out (quickTo)",
  "dauer_ms": "200–300",
  "stagger_ms": "",
  "distanz": "Max-Skalierung 1.6–2.0; Einflussradius ca. 2–3 Icon-Breiten",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.25,
   1,
   0.5,
   1
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "GSAP: macOS dock effect (CodePen, im Codrops-Hub 11/2025)",
   "url": "https://codepen.io/GreenSock/pen/PwNeKZy",
   "auszeichnung": "Codrops Demo Hub",
   "beobachtung": "Offizielle GSAP-Demo; Code nicht abrufbar.",
   "art": "demo"
  },
  {
   "seite": "Osmo: Apple Dock Navigation Bar (CodePen, 11/2024)",
   "url": "https://codepen.io/osmosupply/pen/BaXPYNQ",
   "auszeichnung": "Codrops Demo Hub",
   "beobachtung": "Osmo-Demo im Codrops-Hub gelistet.",
   "art": "demo"
  },
  {
   "seite": "GSAP Forum: menu like macOS dock",
   "url": "https://gsap.com/community/forums/topic/19259-menu-like-macos-dock-help/",
   "auszeichnung": "",
   "beobachtung": "Verweist auf CodePens von Blake Bowen und icebob.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "GitHub: dock-magnification",
   "url": "https://github.com/1jayeshpoduval/dock-magnification"
  },
  {
   "titel": "Osmo: Apple Dock Navigation Bar",
   "url": "https://www.osmo.supply/resource/apple-dock-navigation-bar"
  }
 ],
 "kombinierbar_mit": [
  "schwebende-pill-navigation",
  "scrollspy-kapitelnavigation"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/dock-vergroesserung/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/dock-vergroesserung/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/dock-vergroesserung/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein Produktionsbeleg gefunden; bleibt C (nur CodePen-Demos)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Das Modul-Dock einer Planungs-App wächst unter dem Zeiger mit Kosinus-Falloff, die Nachbarn weichen aus, ein Tooltip mit Tastenkürzel sitzt über dem größten Icon.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0"
  ],
  "werte": {
   "easing": "gsap.quickTo power3.out = cubic-bezier(0.25, 1, 0.5, 1) · UI-Hover und Tooltip easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)",
   "dauer_ms": "quickTo 250 (Breite, Höhe bzw. scale) · Tooltip-Deckkraft 120 · Hover-Flächen 160 · Modulwechsel 180 (opacity 0 → 1, y 6 → 0, power1.out)",
   "distanz": "Ausgangsgröße 44 px, Abstand 6 px; Max-Skalierung 1,8 (79 px); Einflussradius 2,5 Icon-Breiten = 125 px",
   "falloff": "Kosinus: f = (cos(π · d / R) + 1) / 2 für d < R, sonst 0; Größe = 44 px · (1 + 0,8 · f); d = waagerechter Abstand Zeiger zur Ruhe-Mitte des Icons",
   "wachsen": "Breite: width/height animiert, Icons wachsen nach oben aus der Leiste, die Leiste wird breiter, Nachbarn weichen aus · Nur scale: transform-origin 50 % 100 %, Nachbarn bleiben stehen und werden überdeckt",
   "messen": "Ruhe-Mitten relativ zur Dock-Mitte einmal messen (nach Schriften) und bei resize neu, nie während der Bewegung",
   "tooltip": "über dem nächsten Icon, sobald der Zeiger weniger als 0,75 Icon-Breiten von dessen Ruhe-Mitte entfernt ist; folgt dem wachsenden Icon per requestAnimationFrame, 10 px Abstand; auch bei :focus-visible",
   "dock": "Padding 8 px, Radius 18 px, Kacheln Radius 24 %, Trenner vor dem KI-Modul, aktiver Punkt 4 px unter dem Icon",
   "material": "Massiv #161718 mit Rand #2a2d2f · Glas rgba(28, 29, 31, 0.42) mit backdrop-filter blur(18px) saturate(1.5)",
   "farben": "Grund #08090a, Panel #161718, Linien #242728, Text #f7f8f8 / #d0d6e0 / #8a8f98, Markenton #7170ff (Primärknopf abgedunkelt #5e5ce6, Hover #6361f2); Statusfarben #ffc533, #59d499, #57c1ff nur im UI",
   "schrift": "Geist 560 für Titel (h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), −0.022em, Zeilenhöhe 1), Geist 400/500 für UI, Geist Mono für Kennzahlen, Nummern und Tastenkürzel",
   "vorfuehrung": "9-s-Schleife: gedachter Zeiger fährt von links nach rechts über das Dock, zurück, klickt Maschinen und KI-Disponent, verlässt das Dock; Material wechselt je Runde",
   "plantafel": "Balken mit Auftragsnummer und Titel, zu langer Titel endet mit Auslassungspunkten (text-overflow: ellipsis)"
  },
  "ausloeser": "hover",
  "touch": "Keine Vergrößerung: Das Dock wird zur festen Leiste über die ganze Fensterbreite, Icons 34 px mit kurzen Labels darunter, Einstellungen und Trenner entfallen, kein Tooltip. Tippen wechselt das Modul.",
  "reduziert": "Keine Vergrößerung und kein Modul-Einblenden. Hover und Fokus zeigen nur eine hellere Kachelfläche und den Tooltip.",
  "korrekturen": {
   "beschreibung": "Eine Leiste mit Icons, meist unten mittig. Nähert sich der Zeiger, wächst das Icon darunter am stärksten, die Nachbarn mit zunehmendem Abstand schwächer (Falloff). Die Leiste wächst mit. Verlässt der Zeiger die Leiste, kehren alle weich zur Ausgangsgröße zurück. Über dem vergrößerten Icon steht ein Tooltip mit Label.",
   "warum_es_wirkt": "Verspielt, taktil und sofort vertraut, weil jeder das Dock von macOS kennt.",
   "wann_einsetzen": "Persönliche Portfolios, Spielwiesen, Tool-Sammlungen und Labs.",
   "wann_nicht": "Bei seriösen Marken. Auf Touch-Geräten, dort fehlt der Zeiger. Wenn Icons ohne Label unverständlich sind. 2026 wirkt der Effekt zunehmend wie ein Template.",
   "varianten": [
    "Icons mit Label-Tooltip",
    "Abschnitts-Dock (Abschnitte statt Apps)",
    "Glas-Dock mit backdrop-filter"
   ],
   "umsetzung": "Bei pointermove für jedes Icon die waagerechte Distanz zum Zeiger berechnen: scale = 1 + (maxScale − 1) × max(0, 1 − d / radius), weicher mit Kosinus-Falloff. Die Werte per gsap.quickTo nachführen. Sollen die Nachbarn ausweichen, Breite und Höhe statt scale animieren. Fallstrick Layout-Thrashing: die Ruhe-Positionen einmal messen und nur bei resize neu.",
   "mobil": "Keine Vergrößerung. Statische Leiste mit Labels.",
   "reduzierte_bewegung": "Keine Vergrößerung, nur Hover- und Fokus-Fläche.",
   "barrierefreiheit": "Icons brauchen zugängliche Namen. Der Tooltip erscheint auch bei Tastaturfokus. Die Vergrößerung darf Trefferflächen nicht verschieben, während man klickt."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept saas-produkt-praezise. Erfundene Planungssoftware Taktwerk aus Karlsruhe; das Produkt-UI ist der Hero (Plantafel eines erfundenen Blechbetriebs aus Rheinstetten), das Dock ist die Modul-Navigation der App mit sieben echten Ansichten (Plantafel, Aufträge, Maschinen, Schichten, Auswertung, KI-Disponent, Einstellungen). Umschalter zeigen Breite gegen scale und Massiv gegen Glas. Referenzen (nur Prinzipien): linear.app, raycast.com, attio.com, poolsuite.net, osmo.supply. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Primärknopf „Kostenlos testen“ von Akzent #7170ff auf #5e5ce6 abgedunkelt (Weiß 5,1:1), Hover #6361f2 statt heller. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Offen (Hinweis): Auftragsbalken der Plantafel kürzen lange Namen bei 320 px mit Auslassungspunkten, die Tafel ist Produkt-Attrappe."
 }
}