Microinteraction
The tiny contained moment around a single action: the toggle that slides, the heart that pops, the button that confirms it heard you.
See it
What it is
A microinteraction is one contained moment built around a single action. Dan Saffer's breakdown is still the useful one: a trigger (tap, hover, a server event), rules (what can happen), feedback (the visible or felt response), and loops and modes (what changes on the hundredth use). The toggle that slides and recolors, the copy button that flips to a checkmark, the pull-to-refresh spinner: all microinteractions.
Reach for one wherever state changes and the user needs to know it landed: likes, toggles, sends, saves, adds to cart, form field validation. The good ones carry information. If you can delete the animation and lose nothing the user needed to know, it was decoration.
Two traps. First, duration: a response to direct input should land in roughly 100 to 250ms, because anything slower reads as lag rather than polish, and it must never block the action underneath it. Second, repetition: the confetti burst that charms on day one is noise by day ten, so keep celebration for rare events and honor prefers-reduced-motion with an instant state change instead.
Ask AI for it
Add a microinteraction to this like button. On press: scale the icon from 1 to 1.25 and settle back to 1 over 220ms with a spring-like ease, cross-fade the outline icon to a filled one, and emit a short one-shot particle burst that finishes inside 400ms. Update the count optimistically on press, not on server response, and revert with a quick shake if the request fails. Trigger a light haptic on touch devices. Under prefers-reduced-motion, skip all movement and just swap the icon and color instantly. Keep the button interactive throughout, never disabled mid-animation.