Micro-Interactions
The Details That Matter
Micro-interactions are the smallest unit of interactive design. A button that subtly shifts color on hover. A toggle that animates between states rather than snapping. A notification that slides into view with a slight spring. These details are invisible when done well and painfully obvious when missing.
This collection gathers browser-native micro-interactions that demonstrate restraint, timing, and purpose. The best examples here add information or feedback through motion rather than just adding motion for its own sake.
Categories
Hover and Focus Responses cover what happens when a user points at or tabs to an element. The most effective hover states communicate interactivity without creating visual noise. Subtle scale shifts, color transitions, and border changes outperform dramatic transformations.
State Transitions animate changes between UI states: toggled/untoggled, expanded/collapsed, selected/deselected. The key is that the transition communicates the state change clearly enough that a user understands what happened even at the edge of their peripheral vision.
Feedback Animations confirm that an action was received: a checkmark that draws itself, a button that briefly pulses, a save indicator that fades in and out. These serve a functional purpose and should not be skipped for performance reasons unless the user has requested reduced motion.
Entrance and Exit Motion controls how elements appear and disappear. Fade-in works for most cases. Slide-in works for panels and drawers. Scale-in works for modals and toasts. The motion should suggest where the element came from and where it went.
Timing Is Everything
A micro-interaction that takes 50ms feels instant. At 150ms, users perceive smooth motion. At 300ms, it starts to feel deliberate. Past 500ms, it feels slow. Most micro-interactions should land in the 150ms to 250ms range, using an ease-out curve that front-loads the motion.
The common mistake is making everything the same duration. A small icon rotation and a large panel slide should not take the same amount of time. Match duration to the visual distance the element travels.
Related Reading
- Animation Performance in Real UI covers keeping micro-interactions smooth
- Motion That Looks Good but Reads Badly explores when visual polish undermines usability
- Accessibility for Decorative Motion covers prefers-reduced-motion implementation
- Loaders shares related animation techniques
