Six navigation systems
Choose luminous glass, a utility rail, a coral capsule, editorial mono, floating circles, or a quiet solid surface.
Navigation & proximity
Magnetic Dock
Build a navigation rail that responds to proximity without running an animation loop. Pointer movement and keyboard focus share the same clear magnification language.
Home selected · Move across the dock · Tab to test focus
Bounded attraction
Navigation that feels magnetic, yet stays dependable.
A good dock makes nearby destinations easier to target while preserving layout, focus order, labels, and reduced-motion behavior. The generated component does that with a single frame only when input changes.
Keyboard and pointer parity
Every destination is a semantic link. Focus receives the same clear magnification and label treatment as pointer proximity.
Finite event-driven runtime
Pointer updates are coalesced into one animation frame, values stay bounded, and every listener and pending frame has cleanup.
Three-step workflow
How to use the Magnetic Dock studio
- Choose the navigation density
Start with four to seven destinations, then decide whether labels should appear on hover and focus.
- Shape the field
Tune resting size, peak magnification, influence spread, and settle time while moving across every edge.
- Test focus before export
Tab through the links and confirm each destination stays readable, reachable, and inside the container.
Questions, answered.
Does the dock animate continuously?
No. It requests one bounded paint only after pointer movement. At rest, no frame loop runs.
Is it real navigation?
Yes. The export uses a labelled nav element containing normal anchor links; replace their href values with your routes.
What happens with reduced motion?
Magnification and transitions are removed while links, labels, focus rings, and navigation semantics remain intact.
Will seven items overflow on mobile?
The responsive rules reduce gaps and allow items to shrink to a safe minimum while the dock remains within its container.