Skip to content
Pinky UI

Ambient vs Interactive Motion

Ambient motion sets atmosphere without claiming a target; interactive motion responds to a meaningful hover, focus, press or scroll relationship. Keep those roles visually distinct.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Resting state
Intentional change

Ambient vs Interactive Motion · motion explains one relationship

Purpose

Ambient motion sets atmosphere without claiming a target; interactive motion responds to a meaningful hover, focus, press or scroll relationship. Keep those roles visually distinct.

Cursor blobs, soft spotlights and slow background shifts are ambient. Cursor text, magnetic targets, hover previews and underlines are interactive. Do not let an ambient layer look like a control, and do not add a second interactive response when the first already explains the action.

Ambient layers are optional, pointer-transparent and removable on touch/reduced motion. Interactive states need keyboard equivalents, stable semantics and a static fallback.

Source: packages/skills/patterns/ambient-vs-interactive-motion.md