Anatomy

The root wrapper captures onMouseMove and writes clientX/clientY to two top-level motion values. The dock container is a flex row (or column) rounded pill with a glass-morphism background. Each icon slot is a DockIcon component holding a button, a notification badge, an active dot and a tooltip. A visual separator and a fixed Plus button sit at the end of the list, separated from the dynamic items by a 1px rule.

How it works

Inside each DockIcon, useTransform reads the shared mouseX (or mouseY for vertical) motion value and computes the distance from the icon's center via getBoundingClientRect. That raw distance feeds a useTransform with a distance-to-size mapping ([0, 100, 200] → [56, 48, 44]px). A useSpring wraps the output with mass 0.1, stiffness 200 and damping 15, giving the magnification a snappy but not jarring feel. The result is applied to width and height on the motion.button, so the icon scales from its center without layout shift.

How to build it in React

1. Create shared mouse motion values at the dock level

   At the top of the dock component, call useMotionValue(0) for both X and Y. Attach an onMouseMove handler to the root div that calls mouseX.set(e.clientX) and mouseY.set(e.clientY). Pass both values down to each icon as props.

   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   
   <div onMouseMove={(e) => { mouseX.set(e.clientX); mouseY.set(e.clientY); }}>

2. Compute per-icon distance from the pointer

   Inside DockIcon, attach a ref to the button. Use useTransform on mouseX (or mouseY) with a callback that reads getBoundingClientRect() to get the icon center, then returns Math.abs(pointerPosition - center). This produces a live distance value that updates every frame the pointer moves.

   const distance = useTransform(mouseX, (val) => {
     const bounds = ref.current?.getBoundingClientRect();
     if (!bounds) return 200;
     return Math.abs(val - (bounds.x + bounds.width / 2));
   });

3. Map distance to size with a spring

   Use useTransform on distance with an input range [0, 100, 200] and an output range [56, 48, 44]. Wrap that in useSpring with low mass and moderate stiffness so the icon settles quickly without bouncing. Apply the resulting motion value to width and height on your motion.button.

   const size = useSpring(
     useTransform(distance, [0, 100, 200], [56, 48, 44]),
     { mass: 0.1, stiffness: 200, damping: 15 }
   );
   
   <motion.button style={{ width: size, height: size }} />

4. Add tooltip and active indicator

   Wrap the tooltip in AnimatePresence and render it only when isHovered is true. Use initial/animate/exit on a motion.div for a quick fade-scale. For the active indicator, give all instances the same layoutId ('dock-active') so Framer Motion automatically animates the dot sliding from one item to the next.

   <AnimatePresence>
     {isHovered && (
       <motion.div
         initial={{ opacity: 0, y: 4, scale: 0.9 }}
         animate={{ opacity: 1, y: 0, scale: 1 }}
         exit={{ opacity: 0, y: 4, scale: 0.9 }}
       >
         {item.label}
       </motion.div>
     )}
   </AnimatePresence>
   
   {item.active && (
     <motion.div layoutId="dock-active" className="w-1 h-1 rounded-full" />
   )}

When to use it

Reach for this dock in app shells where you want a compact, always-visible navigation that does not claim a full sidebar column. It suits SaaS dashboards, creative tools, portfolio sites and any context where six to ten top-level destinations need quick access. Avoid it on content-heavy pages where a persistent sidebar with labels improves scanability, and skip the magnification effect on touch devices since proximity sensing requires a real pointer.

Used by

• Apple macOS, The original magnifying dock that inspired this pattern, used as the primary app launcher on every Mac.
• Notion, Uses a compact floating action toolbar in its canvas views that echoes the dock metaphor.
• Framer, The Framer canvas editor exposes a floating toolbar with icon-based tools that scale and highlight on hover.
• Linear, Command bar and quick-action palette use compact icon-first navigation with animated selection indicators.

FAQ