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 leaf falling	Gentle fade + drift downward on dismiss
A bell ringing	Icon that briefly oscillates (shakes) on trigger
A stamp pressing paper	Inner element shift (e.g. icon nudge) without shifting button bounds

The motion should feel inevitable — as if the element has physical properties and cannot behave any other way.

---

Patterns

Animated Icons

Icons that animate on trigger communicate state change more vividly than a static swap.

Checkmark draw-on: A checkmark that draws itself from start to end point on completion.

@keyframes check-draw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
.checkmark path {
  stroke-dasharray: 20;
  animation: check-draw 300ms ease-out forwards;
}