Magnified Dock

Recreation of the Mac OS dock with magnification.

Recreation of the magnification effect from the Mac OS dock.

Uses Framer Motion to track the mouse position in a Motion Value called mouseX. Each icon then derives the pixel distance from the mouse position to its center, and uses a transform to adjust its width based on that distance.

Infinity is used as the null value for mouseX to keep the transforms clean – no active/inactive state is needed to enable magnification since Infinity always falls outside the domain and thus resets the width of each icon.

Note that this demo is not identical to the actual Mac OS dock, since the width of the dock on the far side of the mouse doesn't move with the icons. This behavior is left as an exercise for the reader – or for a future recipe!


import {
} from "framer-motion";
import { useRef } from "react";

function Dock() {
  let mouseX = useMotionValue(Infinity);

  return (
      onMouseMove={(e) => mouseX.set(e.pageX)}
      onMouseLeave={() => mouseX.set(Infinity)}
      className="mx-auto flex h-16 items-end gap-4 rounded-2xl bg-gray-700 px-4 pb-3"
      {[...Array(8).keys()].map((i) => (
        <AppIcon mouseX={mouseX} key={i} />

function AppIcon({ mouseX }: { mouseX: MotionValue }) {
  let ref = useRef<HTMLDivElement>(null);

  let distance = useTransform(mouseX, (val) => {
    let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };

    return val - bounds.x - bounds.width / 2;

  let widthSync = useTransform(distance, [-150, 0, 150], [40, 100, 40]);
  let width = useSpring(widthSync, { mass: 0.1, stiffness: 150, damping: 12 });

  return (
      style={{ width }}
      className="aspect-square w-10 rounded-full bg-gray-400"

Libraries used

Get our latest in your inbox.

Join our newsletter to hear about Sam and Ryan's newest blog posts, code recipes, and videos.