The art of the perfect micro-interaction

The difference between a good interface and a delightful one is often invisible: a button that responds to your press, a toggle that glides, a heart that pops when you tap it. These tiny moments are micro-interactions, and they're what make a product feel alive.

Real micro-interactions, go ahead and click around.

Like · 128

Toggle

Copy Copy

Subscribe Loading state

The anatomy of a micro-interaction

Every micro-interaction, no matter how small, is built from four parts. Get all four right and it feels effortless:

• Trigger. What starts it, a click, a hover, a state change, or the page loading.
• Rules. What happens, and in what order. The logic behind the moment.
• Feedback. What the user sees, hears or feels in response, the visible part.
• Loops & modes. What happens over time or on repeat, does it reset, remember, or evolve?

Easing is everything

The single biggest factor in how motion feels isn't how far something moves, it's the easing curve. The same animation can feel robotic, smooth or playful depending on its timing function. Try switching between them:

The same move feels completely different depending on the curve. Pick one.

Linear Ease out Ease in-out Spring

Replay

Real-world motion never moves at a constant speed, so linear easing feels wrong. Ease things out for UI that enters, and add a touch of overshoot ("spring") for moments that should feel delightful. In CSS, that's one line:

.button {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.button:active {
  transform: scale(0.94); /* tactile "press" */
}

/* A heart that pops when you like it */
@keyframes pop {
  40% { transform: scale(1.4); }
}
.like.is-active { animation: pop 0.35s ease; }

What makes a great one

Not every interaction should be flashy. The best ones balance several qualities at once, purposeful, fast, and subtle enough to never get in the way:

Score out of 100, balance matters more than maxing any one out

Principles to keep in mind

• Keep it fast. 150-300ms is the sweet spot. Anything slower feels sluggish.
• Give instant feedback. Every action should produce a reaction, even a subtle one.
• Respect prefers-reduced-motion. Always offer a calm, motion-free fallback.
• Don't overdo it. If everything animates, nothing stands out. Use motion to guide attention.

Micro-interactions are the polish that separates a site that works from one that feels considered. They're small by definition, but they're the details people remember.