The Invisible Labor of Micro-interactions

0 words

0 m

Last week, I spent four hours adjusting a button hover state by three pixels.

My manager walked by and asked what I was working on. "Button animations," I said. She glanced at my screen, saw what looked like a regular button, and nodded politely before moving on. I could see it in her eyes—the question she was too kind to ask: why are you wasting time on this?

The button shipped. No one noticed the hover state. No one commented on the subtle scale transform or the perfectly timed opacity fade. The product moved forward, users completed their tasks, and my four hours vanished into the invisible.

import { useState } from 'react';

export default function Demo() {
  const [hovered, setHovered] = useState(null);
  
  return (
    <div style={{ width: '100%', maxWidth: '600px', margin: '60px auto', padding: '48px', background: '#f9fafb', borderRadius: '24px' }}>
      <h3 style={{ textAlign: 'center', fontSize: '24px', marginBottom: '40px' }}>Hover Each Button</h3>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
        <button
          onMouseEnter={() => setHovered(1)}
          onMouseLeave={() => setHovered(null)}
          style={{ width: '100%', padding: '20px', background: '#1f2937', color: 'white', border: 'none', borderRadius: '12px', fontSize: '16px', cursor: 'pointer', transition: 'none' }}
        >
          No Craft
        </button>
        
        <button
          onMouseEnter={() => setHovered(2)}
          onMouseLeave={() => setHovered(null)}
          style={{ width: '100%', padding: '20px', background: '#2563eb', color: 'white', border: 'none', borderRadius: '12px', fontSize: '16px', cursor: 'pointer', transition: 'background 200ms' }}
          onMouseOver={(e) => e.target.style.background = '#1d4ed8'}
          onMouseOut={(e) => e.target.style.background = '#2563eb'}
        >
          Basic Craft
        </button>
        
        <button
          onMouseEnter={() => setHovered(3)}
          onMouseLeave={() => setHovered(null)}
          style={{ 
            width: '100%', 
            padding: '20px', 
            background: 'linear-gradient(to right, #8b5cf6, #3b82f6)', 
            color: 'white', 
            border: 'none', 
            borderRadius: '12px', 
            fontSize: '16px', 
            cursor: 'pointer',
            transform: hovered === 3 ? 'scale(1.02)' : 'scale(1)',
            boxShadow: hovered === 3 ? '0 20px 40px rgba(139, 92, 246, 0.3)' : 'none',
            transition: 'all 180ms ease-out'
          }}
        >
          Invisible Craft
        </button>
      </div>
    </div>
  );
}

But here's what I know: those four hours matter.

We talk a lot about design decisions that users see. The color palette. The layout. The copy. These are the things that show up in portfolio case studies and design system documentation. They're easy to explain, easy to justify, easy to measure.

But the craft of interaction design lives in the spaces between. It's the 180ms delay before a tooltip appears. The ease-out curve on a modal that makes it feel like it's floating into view rather than jerking into existence. The way a loading spinner doesn't just spin but has subtle acceleration and deceleration that makes it feel less mechanical, more alive.

There's a famous story about a potter who spent years perfecting his craft. A student asked him why he spent so much time on the bottom of the pot—the part no one would ever see. The potter replied: "But I will know."

This is the paradox of craft: the better you are at it, the more invisible it becomes. A poorly executed micro-interaction draws attention to itself—the janky animation, the delayed response, the awkward transition. But a perfectly executed one disappears. It just feels right.