Micro-interactions
Small, contained feedback moments that make interfaces feel responsive — a heart burst, a checkbox bounce, a copy confirmation.
Plain English
Every tap, click, and toggle should acknowledge the user. Micro-interactions are those tiny moments of feedback — the Twitter heart that bursts into particles when you like a tweet, the toggle that slides with a satisfying snap, the copy button that flashes "Copied!" for two seconds. They have four components: trigger (what the user does), rules (what happens), feedback (what the user sees), and loops (does it repeat?). Apps without micro-interactions feel flat; apps with too many feel chaotic. The art is subtlety — 100–300ms animations that confirm actions without demanding attention.
Technical
Keep durations 100–300ms for immediate feedback, 200–500ms for state changes. Use CSS transitions (transition: all 200ms ease-out) for simple state changes. For satisfying bounce effects, use spring-like easing: cubic-bezier(0.34, 1.56, 0.64, 1) — this overshoots slightly then settles. For icon transforms (heart fill, checkmark draw): combine opacity, transform: scale(), and fill transitions. Always pair visual feedback with a brief delay reset (setTimeout) to return the element to its resting state after a temporary change.
Live Demo
Micro-interaction examples
Like
Spring bounce
Checkbox
Bounce on check
Copy
npm install2s state change
Micro-interactions confirm actions — the difference between an app that feels alive and one that feels flat.
Usage
✓ Good usage
A "like" button that scales to 1.3× and fills with red on click, then settles back to normal size — users feel the action was registered.
✗ Bad usage
Every button on a dashboard bouncing and animating on hover — the page feels like a toy, not a professional tool.
Recommended values
- Feedback duration: 100–300ms
- State change duration: 200–400ms
- Spring easing: cubic-bezier(0.34, 1.56, 0.64, 1)
- Scale bounce: 1.2–1.3× at peak
- Color feedback: 200ms transition
- Reset delay for temporary states: 1.5–2.5s
Common mistakes
- Duration too long (> 500ms) — feedback feels sluggish and draws more attention than the action warrants.
- No reduced-motion fallback — the animation disappears for accessibility users but the state change still needs to be communicated.
- Animated on hover instead of click — hover animations fire constantly as users move their mouse, causing visual noise.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add micro-interactions to the social feed. On "like": animate the heart icon from outline to filled with a scale bounce (1.3× peak, 250ms spring easing). On "copy code": switch button text to "✓ Copied" with a green flash for 2s then reset. On form submission success: animate the submit button to a checkmark with a 300ms ease-out transition.