SpatialGenerated from the public API
MagnifyDock
A dock that scales its items under the pointer, with the keyboard path intact.
@luc/ui/motionLive preview
Each lane swells toward the pointer within its own range; the house scale stays under half again.
<MagnifyDock range={90} scale={0.45} lift={6}>
{actions.map((action) => (
<MagnifyDockItem key={action.id} label={action.label}>
{action.glyph}
</MagnifyDockItem>
))}
</MagnifyDock>Usage
import { MagnifyDock } from "@luc/ui/motion";<MagnifyDock range={90} scale={0.45} lift={6}>
{actions.map((action) => (
<MagnifyDockItem key={action.id} label={action.label}>
{action.glyph}
</MagnifyDockItem>
))}
</MagnifyDock>API
| Export | Kind | Signature |
|---|---|---|
MagnifyDock | 4 documented props | ({ className, children, range, scale, lift, orientation, onPointerMove, onPointerLeave, ...props }: MagnifyDockProps) => import("@types/react").JSX.Element |
MagnifyDockItem | 1 documented props | ({ className, children, label, style, ...props }: MagnifyDockItemProps) => import("@types/react").JSX.Element |
MagnifyDock props
Type: MagnifyDockProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
lift? | number | undefined | — | Rise in px at the very centre of an item. |
orientation? | "horizontal" | "vertical" | undefined | — | Lanes stack vertically; every other use is horizontal. |
range? | number | undefined | — | Distance in px at which a neighbour starts to grow. |
scale? | number | undefined | — | Extra scale at the very centre of an item. `0.55` is the house default. |
MagnifyDockItem props
Type: MagnifyDockItemProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
label? | string | undefined | — | The item's accessible name. A dock item is usually a control inside it, so this is only needed when the item itself carries meaning. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Spatial
Depth, layering and geometry — motion that reads as physical space.
Related