A fully animated, proximity-based dock component for React, powered by Framer Motion, TypeScript, and Tailwind CSS. Each item grows, lifts, and reacts to your mouse position with smooth cosine-based scaling — just like the iconic macOS dock, but fully customizable and reusable across your apps.
ReactTypeScriptFramer MotionTailwind CSSVite
- Proximity-based scaling powered by cosine falloff
- Dynamic width & layout updates with ResizeObserver
- Fluid spring animations for natural movement
- Customizable sizing, lift, falloff, and spacing
- Works with any content — icons, images, cards, buttons, etc.
- Reusable component structure with TypeScript interfaces
- Zero re-renders during mouse movement (MotionValues)
I always loved the way the macOS dock feels — smooth, interactive, alive. But most versions online are either too rigid, too janky, or hard to reuse.
So I decided to make my own:
- Started with a simple layout
- Added MotionValues to track mouse position globally
- Calculated proximity using a cosine falloff curve
- Interpolated item size dynamically
- Used real width/height animations instead of scale() to avoid overlap
- Added ResizeObserver to update dock width in real time
The result is a snappy, responsive dock that feels good to play with — whether you drop in gradient cards, social media icons, or your own components.
- The MouseProvider tracks global mouse X using Framer Motion.
- Dock measures its width to calculate relative distances.
- Each DockItem:
- Computes its center X
- Calculates how close the mouse is
- Applies cosine(angle) ** falloff to create the Mac-style scaling curve
- Animates width/height and vertical lift with springs
This ensures smooth, predictable interactions no matter the number of items.
- Clone the repository
- Install dependencies:
npm install - Start development server:
npm run dev - Open your browser at:
http://localhost:5173