macOS style magnifying dock with proximity scaling of icons.
Move the pointer across the dock. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
items | DockItemData[] | [] | Array of dock items. Each item takes an Iconify icon name, a label, an onClick handler, and an optional className. Use the icon-<index> slot for custom icon markup. |
distance | number | 200 | Pixel distance used to calculate the magnification effect based on mouse proximity. |
panelHeight | number | 68 | Height (in pixels) of the dock panel. |
baseItemSize | number | 50 | The base size (in pixels) for each dock item. |
dockHeight | number | 256 | Maximum height (in pixels) of the dock container. |
magnification | number | 70 | The magnified size (in pixels) applied to a dock item when hovered. |
spring | SpringOptions | { mass: 0.1, stiffness: 150, damping: 12 } | Configuration options for the spring animation. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Move focus between dock items. The focused item shows its label. |
| Enter + Space | Activate the focused item. |