127 Components
macOS Dock Magnification
NavigationmacOS-inspired dock magnification bar with continuous Gaussian/cosine pointer falloff, spring physics scaling, click-to-bounce launch animations, floating tooltip labels, and running indicator dots.
macOS Desktop Dock Simulation
macOS Continuous Spring Dock
Continuous Gaussian pointer falloff with spring physics, click-to-bounce, and status dots
Active App: Safari
Interactive Test Stage
Glide your pointer across the dock to inspect smooth magnification curves. Click an icon to trigger spring bounce.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/dock-magnification.json"
Props
TypeScript props supported by <DockMagnification />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DockAppItem[] | — | Array of dock application objects with icons, colors, running states, and badges. |
| baseSize | number | 48 | Default unmagnified icon size in pixels. |
| magnification | number | 1.65 | Peak magnification multiplier when cursor directly hovers an item. |
| distance | number | 140 | Gaussian falloff influence radius in pixels on either side of pointer. |
| onItemClick | (item: DockAppItem) => void | — | Callback triggered when a dock icon is clicked. |
| className | string | — | Additional Tailwind CSS classes applied to root container. |
| embedded | boolean | — | Whether the dock renders embedded inside container rather than fixed to viewport |
Key Features
- Continuous Gaussian/cosine pointer falloff calculating dynamic icon sizing smoothly in real-time.
- Spring-damped physics eliminating jarring jumps during rapid pointer movement.
- Click-to-bounce keyframe oscillation simulating macOS application launch feedback.
- Frosted backdrop glass container with specular reflections and dark/light mode elegance.
- Customizable magnification factor, falloff radius, and app running indicator dots.
Keyboard & Accessibility
- Keyboard accessible with tab navigation and focus indicators on dock apps.
- Clear ARIA labels for each application icon with tooltips for screen readers.
- Respects reduced motion settings for bounce oscillations and scale effects.