Apple Dock
macOS-style magnification dock with spring physics — icons scale based on cursor proximity.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | DockItem[] | DEFAULT_ITEMS | Array of dock items with id, label, emoji, bg gradient, and content node. |
| defaultActive | string | items[0].id | ID of the initially active item. |
| accentColor | string | #a78bfa | Color of the active dot indicator under icons. |
| dockBg | string | rgba(255,255,255,0.14) | Background of the dock shelf pill. |
When to Use
Use when you want an iconic, delightful navigation experience that showcases premium interaction design. Perfect for app dashboards, portfolio showcases, or creative tools.
Best Practices
Keep the dock to 4-6 items for best magnification effect. Ensure each item has a distinct emoji and gradient for visual differentiation.
Why This Component Matters
The macOS dock magnification is one of the most recognizable and delightful UI patterns ever created. Bringing it to the web signals exceptional attention to interaction craft.
FAQ
QHow does the magnification work?
Each icon uses useMotionValue to track cursor X position, then useTransform maps the distance from cursor to icon center onto a size scale, smoothed with useSpring.
QWhy is DockIcon a module-level component?
Hooks (useSpring, useTransform) must be called consistently — a nested component would remount on each parent render, breaking hook rules. Module-level ensures stability.
QCan I add more items?
Yes — add objects to the items array with id, label, emoji, bg (CSS gradient string), and a content React node.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.