Chapter II

Interactions

Words for how an interface reacts before the user commits: pointer, focus, press, and proximity.

01

Hover

A state change when the pointer rests over a target. It can reveal affordance, not hide essential information.

Secondary action
Use whenDesktop pointer users need confirmation of interactivity.
Don’t use whenThe same information must work on touch-only devices.

“Add hover magic.”
“On hover, raise contrast and reveal the secondary action.”

02

Press feedback

Immediate tactile response during pointer down or touch down. It tells the user the action registered.

Use whenButtons, chips, list rows, and controls need touch confidence.
Confused withClick animation, which usually happens after commit.

“Make the button animated.”
“Add press feedback: scale to 0.98 on pointer down, restore on release.”

03

Magnetic

A target subtly follows the pointer before activation. It is decorative affordance, not layout movement.

Use whenA hero CTA or special control deserves a premium physical feel.
Don’t use whenThe interface is dense, task-heavy, or needs low distraction.

“Make it fun.”
“Give the CTA a subtle magnetic hover within 12px of pointer travel.”