THE POWER OF MICRO-INTERACTIONS

Micro-interactions are the small, contained moments of feedback that happen throughout a UI: a button that depresses on click, a form field that highlights red on invalid input, a toggle that eases into its new state. Individually they seem minor. Collectively, they're what separates an interface that feels crafted from one that feels assembled.

The defining quality of a good micro-interaction is that it communicates something. The animation isn't decorative — it's informational. A loading spinner says 'wait'. A shake animation says 'that input was wrong'. A smooth height transition on an accordion says 'this content is revealing, not replacing'. When the motion doesn't communicate, it's noise.

Duration is the most common mistake. Most UI animations should be between 150ms and 400ms. Below 150ms and changes feel instantaneous — the animation doesn't register. Above 400ms and the interface starts to feel sluggish, like the user is waiting for the UI to catch up to their intent. The sweet spot depends on the size of the motion: larger movements read as intentional at longer durations; small hover states need to be near-instant.

Easing is equally important and often defaulted away. ease-in-out is the safe middle ground, but it's rarely optimal. Elements entering the screen typically want ease-out (fast start, slow finish — like something coming to rest). Elements leaving want ease-in (slow start, fast finish — like something being dismissed). Using the right curve makes motion feel physical rather than mechanical.

The best way to develop an eye for this is to slow animations down — most browser DevTools let you dial motion speed to 10%. At that speed, subtle easing problems and abrupt state changes become obvious. Design at normal speed, debug in slow motion.