Skip to content
Pinky UI

Collection Hover

Hover should clarify relationships inside a collection. It may lift the focused item, quiet a neighbour, shift a crop or reveal metadata, but it should not scale every card by the same amount.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Resting state
Intentional change

Collection Hover · motion explains one relationship

Hover should clarify relationships inside a collection. It may lift the focused item, quiet a neighbour, shift a crop or reveal metadata, but it should not scale every card by the same amount.

Give focus the same meaningful response, keep the label available without hover, and disable cursor-only decoration on touch.

Source: packages/skills/patterns/collection-hover.md