Micro-Interactions: The Architecture of Responsive UI
Master micro-interactions in UI design. Learn the anatomy of a micro-interaction, trigger, rules, feedback, and loop patterns with interactive code examples.
Core Takeaway
Micro-interactions are contained product moments centered on a single interactive task — liking a post, toggling a setting, submitting a form, or completing a gesture. Each micro-interaction has four components: a trigger that initiates it, rules that determine what happens, feedback that communicates the outcome to the user, and loops or modes that govern long-term behavior.
The Anatomy of a Micro-Interaction
Dan Saffer's framework defines micro-interactions as containing four core components that together create a complete, communicative moment in the interface.
Trigger
The event that initiates the micro-interaction. Triggers can be user-initiated (a tap, a hover, a long-press, a drag) or system-initiated (a new notification arriving, a loading state completing, an error occurring).
Rules
What happens during the interaction. Rules define valid states, constraints (drag boundaries, minimum/maximum values), and the sequence of events.
Feedback
The visual, haptic, or auditory response that communicates what is happening. This is where spring animations, color state changes, icon morphs, and text label updates live.
Loops & Modes
What happens after the micro-interaction completes, and whether different modes alter the experience (e.g., dark mode changes the visual feedback but not the interaction logic).
High-Value Micro-Interaction Patterns
These patterns consistently improve user engagement and perceived quality when implemented with physics-based animation.
- Button press: scale down to 0.92–0.96 on pointerdown, spring back on release
- Toggle switch: spring-based horizontal translation with color state change
- Checkbox: icon morph from empty circle to checkmark via SVG path interpolation
- Pull-to-refresh: elastic overscroll with inertia and spring settlement
- Form submit: loading spinner → success checkmark morphing sequence
- Swipe-to-delete: velocity-based reveal with spring-back below threshold
Building Micro-Interactions with State Machines
Micro-interactions modeled as finite state machines are deterministic and bug-free. Instead of managing boolean flags, you define explicit states (idle → pressed → loading → success → idle) with valid transitions between each state.
Production Implementation Snippet
import { useExodeMachine } from '@exodeui/react';
// State machine-driven micro-interaction
const sendButtonMachine = {
initial: 'idle',
states: {
idle: { on: { CLICK: 'sending' } },
sending: { on: { DONE: 'success', ERROR: 'idle' }, after: 1800 },
success: { on: { RESET: 'idle' }, after: 2500 }
}
};
export function SendButton() {
const [state, send] = useExodeMachine(sendButtonMachine);
const labels = { idle: 'Send', sending: 'Sending…', success: '✓ Sent!' };
return (
<button
onClick={() => send('CLICK')}
disabled={state === 'sending'}
className={`px-6 py-3 rounded-xl font-semibold transition-colors ${
state === 'success' ? 'bg-emerald-600' : 'bg-violet-600'
}`}
>
{labels[state]}
</button>
);
}