Interactions

A temporary state change while a pointer rests over a target — desktop and stylus only, never touch. It may reveal a secondary action or hint, but it must never hide essential information.

Use when

Desktop pointer users benefit from confirmation that an element is interactive.

Don't use when

The same information must work on touch — there is no hover on touch devices.

Say it precisely“Add hover magic.”“On hover and focus, raise contrast and reveal the secondary action; keep all essential content visible without hovering.”

A state that triggers when the pointer enters a distance threshold around a target — before it touches it. It creates a premium, spotlight affordance for special controls.

Use when

A hero element or special control deserves to feel responsive before it's even reached.

Confused with

Hover — which needs the pointer resting on the target; proximity reacts within a radius around it.

Say it precisely“Make the cards glow near the cursor.”“Within 120px of pointer distance, scale and brighten each card proportionally to closeness — a spotlight, not a binary hover.”

A response while the pointer is held down — a scale, a darken, a haptic — confirming the action registered. It ends on release, which separates it from a persistent active state.

Use when

Buttons, chips, and list rows need touch confidence — feedback the instant a press begins.

Confused with

Active state, which persists after release; press feedback lives only during the hold.

Say it precisely“Make the button animated.”“Add press feedback: scale to 0.96 on pointer down, restore with a spring on release.”

A target that subtly tracks the pointer within a small radius before a click. It moves as decoration only — never affecting layout — and is usually paired with press feedback on a hero CTA.

Use when

A single hero CTA or special control deserves a premium, physical feel.

Don't use when

The interface is dense or task-heavy and needs low distraction.

Say it precisely“Make it fun.”“Give the CTA a magnetic pull within ~12px of travel, eased with a spring; reset on pointer leave.”