Bellows
A dock whose icons magnify under the cursor with wave falloff to neighbors on spring physics — the swelling icon brightens with a soft white glow, neighbors catch a dimmer silver spill, and a soft reflection tracks the cursor across the plate. Keyboard focus magnifies like hover; coarse pointers get plain tap targets.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/bellowsManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BellowsItem[] | a small generic set | Dock items. |
| size | number | 44 | Resting cell size in px. |
| magnification | number | 1.9 | Peak scale multiplier for the cell directly under the cursor. |
| distance | number | 140 | Pixel radius of the magnify wave — how far the swell spills into neighbors. |
| spring | { stiffness?: number; damping?: number; mass?: number } | Spring physics for cell growth. | |
| heat | number | 0.85 | 0–1: scales glow strength and the plate reflection together. |
| colors | [string, string] | [spill, peak] — the dim neighbor-spill color and the bright peak color. | |
Also accepts all props of React.ComponentPropsWithoutRef<"nav"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.