micro-interactions

# Micro-Interactions A micro-interaction is a moment. A checkbox that draws its checkmark. A heart that pulses when liked. A toggle that eases into place with a little overshoot. A confetti burst on completing a goal. These moments are small in duration — 200–600ms — but they communicate that the product was made by people who cared. The reference is always the natural world. Nothing in nature snaps instantly. Everything has weight, momentum, and a moment of settling. --- ## What Makes a Good Micro-Interaction A micro-interaction earns its place when it: 1. **Confirms an action** — makes the result of a click, tap, or input unmistakably clear 2. **Rewards a milestone** — celebrates something the user worked toward 3. **Reveals something** — unfolds information in a way that aids understanding 4. **Adds texture** — makes an otherwise flat moment feel physical and real It fails when it: - Delays the user (animation blocks the next action) - Repeats too often (becomes noise, not signal) - Exists only for decoration (no information is conveyed) --- ## Natural World as Reference Physical objects have inertia, springiness, and weight. UI that borrows these properties feels intuitive because it matches expectations built over a lifetime. | Natural behaviour | UI equivalent | |---|---| | A door swinging to rest | Toggle that overshoots slightly before settling | | Water dripping | Staggered list item reveals | | A rubber band snapping back | Pull-to-refresh bounce | | A le...