Micro-interactions are the handshake between your product and its user. A button that acknowledges a tap, a form field that flags an error before submit, a toast that fades in the moment a save succeeds - individually they look like polish, but together they're how a product feels responsive instead of reactive.
The Four-Part Anatomy
Dan Saffer's framework still holds up after a decade. Every micro-interaction is a trigger, a rule, feedback, and a mode or loop. When one of these is missing you usually notice - a button that animates on hover but not on click feels broken, even if technically it isn't.
- Trigger: the user action or system event. Make it discoverable.
- Rule: what happens next. Keep it predictable.
- Feedback: the signal that the rule fired. This is where most products under-invest.
- Loop / mode: what happens over time or on repeat. Decide deliberately - undefined behavior here is where bugs hide.
Timing Is Almost Everything
Humans perceive anything under ~100ms as instantaneous and anything over ~400ms as a delay. That gives you a narrow comfort band. A good default:
- 80–150ms for hover, focus, and toggle state changes.
- 200–300ms for panel opens, accordions, and modal entrances.
- Always under 500ms unless the motion is communicating meaningful progress.
Pair these with an ease-out curve - motion should decelerate into its resting state, not slam into it. Reserve custom cubic-béziers for moments that deserve personality.
Restraint Is a Feature
The temptation is to animate everything. Resist it. Motion earns attention, and attention is finite - if every list item springs into place, none of them feel important. Respect prefers-reduced-motion and cut animations aggressively on repeat actions users perform dozens of times a day.
For deeper reading, UX Collective has a solid back catalogue on the craft. The throughline across all of it: the details you don't notice are the ones doing the most work.