Hover Hierarchy
A page normally needs only a few strong hover moments:
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Quiet support
Primary response
Hover Hierarchy · attention follows consequence
A page normally needs only a few strong hover moments:
- Primary hover establishes the main relationship or preview.
- Secondary hover supports a collection without competing with the primary.
- Utility hover stays quiet and should never delay an action.
When every item moves, nothing has hierarchy. Reserve expressive response for the item the user is actually inspecting.
Source: packages/skills/patterns/hover-hierarchy.md