The four jobs every micro-interaction can have
A micro-interaction pays rent when it does one of four things. Confirm: the system heard you (button press, checkbox tick). Guide: the system shows what is next (focus ring, suggested chip). Correct: the system catches a mistake before it costs you (field shake, inline error). Reward: the system marks a milestone (counter roll, confetti at a real achievement).
The test is the same as choreography: name the job. 'It feels nice' is not a job — it is a decoration with good posture.
- Button press: 0.1–0.15s scale to 0.97 with immediate visual response — confirms the tap landed before the action resolves.
- Toggle: a thumb that travels with the state change and a background that recolors in the same frame — the state and the motion must never disagree.
- Copy button: text swap to '✓ Copied' inside the button, not a toast from across the screen — the confirmation lives where the action happened.
- Number change: odometer roll only for the changed digits — rolling every digit on 1,998 → 1,999 makes the eye read three changes that did not happen.
- Field error: a 4px horizontal shake on the field plus a message in the live region — motion draws the eye, the message carries the meaning.
- Focus: a visible ring with a 120ms fade-in — never an instant pop, never a slow bloom; focus is a promise the keyboard made.
- Scroll anchor: the scroll-progress bar fills in step with the actual scroll, not a timer — it must never lie about position.
- Drag: the dragged element goes 0.95 scale and shadows up — it is now 'in hand', visually separated from the page.
- Drop target: the target outline brightens as the dragged item approaches, not on hover-over-anywhere — proximity is the cue.
- List reorder: displaced items glide aside with a spring — the user must see where their item will land before releasing.
- Delete: a two-step confirm where the first click visibly arms the button ('Delete?' turns red) — the state change is the feedback.
- Loading: skeleton shimmer fills the shape of what is coming — it answers 'where will my content be?' instead of 'wait'.
- Pull-to-refresh: a spinner that only starts once the pull passes the threshold, and snaps back if it does not — the threshold is the rule.
- Empty drop: the file-drop zone pulses once when a file is rejected with a reason — rejection must never be silent.
- Command palette: results re-rank as you type and the active row moves with the arrow keys — selection motion tracks the keys 1:1.
- Swipe to dismiss: the card follows the finger and the delete affordance reveals underneath — the finger is the physics.
- Notification bell: the badge appears with a one-beat pop and the bell nudges 8° — two cues, same message, neither spammy.
- Infinite scroll: the sentinel row shows a 3-dot leader while fetching, then new cards settle in — loading is named, arrival is calm.
- Save indicator: 'Saved' fades to 'Saved 2m ago' — the motion confirms, then the text ages honestly.
- Theme switch: the background cross-fades while text stays put — the light change is the story, text legibility is never compromised.
Rent is paid in attention, not pixels
A micro-interaction that fires every time will be tuned out by the brain inside a week. The ones that keep paying rent are the ones that fire only when they carry news: the odometer rolls on the number that matters, the shake fires on the mistake, the confetti fires on the milestone. Frequency is a design decision — spend motion where the user is deciding, and keep it silent where they are cruising.