Dock
A macOS-style magnifying dock: the tile under the cursor swells to a peak scale and its neighbours follow on a Gaussian falloff, rolling a magnification wave along the row on spring physics. Its signature is the launch bounce — activating a tile fires the classic dock leap (spring up, squash on landing, settle) while an accent dot marks running tiles. Real links/buttons with labelled tooltips, a roving-tabindex toolbar (Arrow keys move, Home/End jump), and a static, tooltip-only fallback under reduced motion.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/dockManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DockItem[] | a small generic set | Dock tiles, left to right. |
| size | number | 48 | Resting tile size in px. |
| magnification | number | 2 | Peak scale multiplier for the tile directly under the cursor. |
| distance | number | 150 | Pixel radius of the magnify wave — how far the swell spills into neighbours (the Gaussian is tuned to fade out by this distance). |
| bounce | number | 22 | Height in px of the launch bounce fired when a tile is activated (the classic dock "leap"). Set to 0 to disable the bounce. |
| spring | { stiffness?: number; damping?: number; mass?: number } | Spring physics for tile growth. | |
| accent | string | "#a5b4fc" | Single accent hue — used for the running-indicator dot and a faint under-tile glow at peak magnification. Everything else stays neutral glass. |
| paused | boolean | false | Freeze all motion (magnify + bounce). Tooltips still work. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"nav">, "onClick"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.