Open experiment
Magnifying dock navigation
A compact semantic navigation dock with a fluid proximity response. Nearby destinations grow under the pointer, keyboard focus receives the same magnification and label treatment, and reduced-motion mode preserves clear static states.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<nav class="cmp-magnifying-dock" aria-label="Workspace destinations">
<a href="#home" aria-current="page" style="--cmp-scale: 1"
><span aria-hidden="true">⌂</span><b>Home</b></a
>
<a href="#search" style="--cmp-scale: 1"><span aria-hidden="true">⌕</span><b>Search</b></a>
<a href="#lab" style="--cmp-scale: 1"><span aria-hidden="true">◇</span><b>Lab</b></a>
<a href="#saved" style="--cmp-scale: 1"><span aria-hidden="true">☆</span><b>Saved</b></a>
<a href="#profile" style="--cmp-scale: 1"><span aria-hidden="true">●</span><b>Profile</b></a>
</nav>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The component uses semantic navigation and labeled links.
- Keyboard focus receives the same enlarged and labeled state.
- Reduced motion removes proximity interpolation.
License: MIT License for open-source use, modification, and distribution.