Motion Tabs
A layered navigation selector where hover and active surfaces follow the label currently in focus.
- Category
- Navigation
- Year
- 2026
- Status
- Experiment
What it is
A selection indicator with a separate hover layer.
Motion Tabs uses two independently positioned surfaces. A darker surface previews the item under the pointer or keyboard focus, while a lighter surface remains attached to the selected destination.
The experiment is best suited to a small group of equal-priority destinations. If the labels control content panels rather than navigation state, the same visual treatment should be paired with complete tab semantics and associated panels.
Design decisions
How the component separates preview from selection.
Two state layers
Hover and selection use different surfaces, allowing temporary exploration without obscuring the destination that is already active.
Anchor-based geometry
Each surface derives its position and size from the current label through CSS anchor positioning instead of duplicating measurements in JavaScript.
Spatial continuity
The surfaces travel between labels rather than disappearing and reappearing, preserving a visible relationship between the previous and next state.
Progressive enhancement
The labels and selected text state remain usable when anchor-positioning support is unavailable, while the moving surfaces are treated as enhancement.
Reference
The browser primitive behind the experiment.
Continue exploring
Another component with coordinated state motion.