Components / Magnifying Dock

Magnifying Dock

A dock whose items swell as the pointer nears, on springs. Distance drives the scale, so the whole row breathes rather than one icon popping.

Usage

import Dock from '@/components/dock/Dock'

<Dock
  baseSize={40}
  magnifiedSize={90}
/>

npx shadcn@latest add https://morphiq.prathampatel.design/r/dock.json

m·ẍ = −k·(x − size(d)) − c·ẋ

size(d) the target size at pointer distance d · m 0.1 · k 200 · c 15

Property	Type	Default	Description
`items`	`DockItem[]`	`DOCK_ITEMS`	Defaults to the five-icon row the demos show.
`activeId`	`string \| null`	—	Controlled selection. Pass `null` for none.
`defaultActiveId`	`string \| null`	`null`	Starting selection when uncontrolled.
`onSelect`	`(id: string \| null, item: DockItem \| null, index: number) => void`	—	Fires on every activation, including deselection, where `id` is null.
`baseSize`	`number`	`36`	Item size at rest, in px.
`magnifiedSize`	`number`	`54`	Item size directly under the pointer, in px.
`surface`	`string`	`'#08101e'`	—
`border`	`string`	`'#142544'`	—
`itemBorder`	`string`	`'#0c1f43'`	—
`accent`	`string`	`'#639aff'`	—
`icon`	`string`	`'#ffffff'`	—