# Dock — Animated Navigation for React

> A macOS-style magnifying dock: the tile under the cursor swells to a peak scale and its neighbours follow on a Gaussian falloff, rolling a magnification wave along the row on spring physics. Its signature is the launch bounce — activating a tile fires the classic dock leap (spring up, squash on landing, settle) while an accent dot marks running tiles. Real links/buttons with labelled tooltips, a roving-tabindex toolbar (Arrow keys move, Home/End jump), and a static, tooltip-only fallback under reduced motion.

- Page: https://crucibleui.com/components/navigation/dock
- Category: [navigation](https://crucibleui.com/components/navigation)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/dock
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/dock`.

## Props (`DockProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items?` | `DockItem[]` | `a small generic set` | Dock tiles, left to right. |
| `size?` | `number` | `48` | Resting tile size in px. |
| `magnification?` | `number` | `2` | Peak scale multiplier for the tile directly under the cursor. |
| `distance?` | `number` | `150` | Pixel radius of the magnify wave — how far the swell spills into neighbours (the Gaussian is tuned to fade out by this distance). |
| `bounce?` | `number` | `22` | Height in px of the launch bounce fired when a tile is activated (the classic dock "leap"). Set to `0` to disable the bounce. |
| `spring?` | `{ stiffness?: number; damping?: number; mass?: number }` | — | Spring physics for tile growth. |
| `accent?` | `string` | `"#a5b4fc"` | Single accent hue — used for the running-indicator dot and a faint under-tile glow at peak magnification. Everything else stays neutral glass. |
| `paused?` | `boolean` | `false` | Freeze all motion (magnify + bounce). Tooltips still work. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"nav">, "onClick">`.

## Usage example

```tsx
import { Dock } from "@/components/crucible/dock";

export default function DockDemo() {
  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.04),transparent_70%)]"
      />
      <div className="relative z-10 flex flex-col items-center gap-12 px-6 text-center">
        <div className="flex flex-col items-center gap-2">
          <p className="text-2xl font-semibold tracking-tight text-white">
            Hover the dock
          </p>
          <p className="max-w-xs text-sm text-neutral-500">
            Tiles swell under the cursor. Click one for the launch bounce, or Tab
            in and use the arrow keys.
          </p>
        </div>
        <Dock />
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.