01 · Bottom dock · medium magnify
data-anchor="bottom" data-magnify="md"02 · Top dock · subtle magnify
data-anchor="top" data-magnify="sm"03 · Vertical · left side
data-anchor="left" data-magnify="lg"canvas
inspector
04 · Magnify off · static tray
data-magnify="off"05 · Container-aware · resize the stage
collapses below 480pxUsage
API surfaceAuthoring contract
The host carries .lsd-pointer so lsd-pointer.js auto-attaches and writes --lsd-pointer-x. A tiny script measures each item's centre against the cursor and writes --dist (in item-widths) on it; the CSS rule scales the icon based on --dist and --dock-peak. Tooltips appear on hover or keyboard focus.
| Hook | Values | Effect |
|---|---|---|
data-anchor | bottom · top · left · right | Axis + scale origin + tooltip side. |
data-magnify | off · sm · md · lg | Peak scale factor. off = no magnification, identical to 0. |
data-pinned on item | boolean | Dot indicator below the icon. |
aria-current="true" on item | — | Same indicator, semantic. |
--dock-icon | length | Base icon size. Default 52px. |
--dock-gap | length | Gap between items. |
--dock-peak | 0..1 | Direct override of magnification amount. |
--dock-reach | number | Falloff radius in item-widths. |
prefers-reduced-motion | — | Items stop scaling. Keyboard navigation and tooltips remain. |
View dock HTML
<nav class="lsd-dock lsd-pointer" data-anchor="bottom" data-magnify="md">
<div class="lsd-dock__rail">
<button class="lsd-dock__item" data-pinned aria-current="true">
<span class="lsd-dock__icon">L</span>
<span class="lsd-dock__label">Library</span>
</button>
<!-- …more items… -->
</div>
</nav>