Dock

macOS-style animated dock with Gaussian neighbor icon magnification driven by spring physics.

Installation

File Structure

dock.tsx

Usage

import { Dock } from "@/components/unlumen-ui/dock";

const items = [
  { icon: "🌐", label: "Browser" },
  { icon: "📁", label: "Files", href: "/files" },
];

<Dock items={items} />;

Custom magnification

<Dock
  items={items}
  magnification={3}
  distance={120}
  springOptions={{ stiffness: 400, damping: 25 }}
/>

API Reference

Dock

PropTypeDefault
items
DockItem[]
-
magnification?
number
2.2
distance?
number
100
iconSize?
number
48
gap?
number
12
alwaysShowLabels?
boolean
false
springOptions?
SpringOptions
{ stiffness: 300, damping: 22, mass: 0.5 }
className?
string
-

DockItem

PropTypeDefault
icon
React.ReactNode
-
label
string
-
href?
string
-
onClick?
() => void
-

Notes

  • Magnification uses a Gaussian bell curve: scale = (magnification − 1) × exp(−d² / (2 × distance²)) + 1, so icons taper smoothly from the cursor outward.
  • Each icon's scale is independently driven by a useSpring on a useTransform of the shared mouseX MotionValue — no re-renders during animation.
  • The dock uses origin-bottom so icons scale upward from their base, matching macOS behavior.
  • Tooltips animate with a 150ms ease-in/out on hover.
  • The dock container has backdrop-blur-md applied — ensure there's a background element behind it for the blur to be visible.