Magnetic Dock

Interactive

A macOS-style dock whose items magnify with cursor proximity, spring-smoothed. Keyboard focusable; magnify disabled under reduced-motion.

Inspired by Componentry — Magnetic Dock (and the macOS Dock) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/magnetic-dock.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/magnetic-dock.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<MagneticDock
    items={[
      { icon: <Home />, label: "Home" },
      { icon: <Search />, label: "Search" },
      { icon: <Music />, label: "Music" },
      { icon: <Camera />, label: "Camera" },
      { icon: <Star />, label: "Starred" },
      { icon: <Settings />, label: "Settings" },
    ]}
  />

Props

MagneticDockProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
items*	DockItem[]	—	—
size	number	44	Resting icon size (px).
magnification	number	78	Peak magnified size (px).
distance	number	140	Cursor influence radius (px).

npm dependencies

motion