Day 19: Micro-Interactions

The Details That Delight

Micro-interactions are the tiny moments that transform functional interfaces into delightful experiences. They're the subtle bounce when you like something, the smooth reveal of a tooltip, the satisfying snap of a toggle. Linear's interface demonstrates mastery - every hover, click, and transition feels intentional. These details communicate care and craft more than any design system.

Anatomy of Micro-Interactions

Every micro-interaction has four parts: trigger (what starts it), rules (what happens), feedback (what users see/feel), and loops/modes (what happens over time). A hover trigger might scale an element (rule), show a color change (feedback), and return smoothly on mouse leave (mode). The best micro-interactions feel inevitable - of course that's what should happen.

Magnetic Button Effect:

button {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

button::before {
  content: '';
  position: absolute;
  inset: -20px;
  z-index: -1;
}

// JavaScript for magnetic effect
button.addEventListener('mousemove', (e) => {
  const rect = button.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  
  button.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
});

button.addEventListener('mouseleave', () => {
  button.style.transform = 'translate(0, 0)';
});

Timing and Personality

Timing curves define interaction personality. Linear easing feels mechanical. Ease-out feels natural. Spring animations feel playful. Match timing to brand personality - a banking app might use conservative easing, while a creative portfolio could employ dramatic springs. Duration matters too - 200-300ms feels responsive, under 100ms feels instant, over 500ms feels sluggish.

Systematic Delight

Create a vocabulary of micro-interactions that work together. If buttons scale on hover, maintain that behavior consistently. If tooltips fade in from bottom, always fade from bottom. Build interaction patterns that users learn unconsciously. The goal is predictable delight - users should anticipate the joy before it happens. This systematic approach scales from single buttons to entire applications.