GlassDock

Navigation

macOS-Dock-Navigation mit Magnification-Effekt: Icons vergrößern sich beim Überfahren mit Cosinus-Falloff, die Leiste ist echtes Glas (backdrop-filter: blur + saturate). Mit Tooltips und Aktiv-Indikator.

Live Demo

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`GlassDockItem[]`	Ja	—	Dock-Einträge {icon, label, href?, onClick?, active?}
`baseSize`	`number`	Nein	`48`	Basisgröße der Icons in Pixeln
`magnification`	`number`	Nein	`1.7`	Maximaler Vergrößerungsfaktor
`range`	`number`	Nein	`110`	Wirkungsradius der Vergrößerung in Pixeln
`fixed`	`boolean`	Nein	`false`	Fixiert am unteren Bildschirmrand
`variant`	`'dark' \| 'light'`	Nein	`'dark'`	Helles oder dunkles Glas
`accentColor`	`string`	Nein	`'#34d399'`	Farbe des Aktiv-Punkts
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<GlassDock
  fixed
  items={[
    { icon: '🏠', label: 'Start', href: '/', active: true },
    { icon: '🍕', label: 'Speisekarte', href: '/speisekarte' },
    { icon: '📷', label: 'Galerie', href: '/galerie' },
    { icon: '🗓️', label: 'Reservierung', href: '/reservierung' },
    { icon: '📞', label: 'Kontakt', href: '/kontakt' },
  ]}
  magnification={1.8}
  variant="dark"
/>