# Micro-Interactions: Satisfying Experience

> Study 21st.dev for component animations & subtle effects worth emulating.

- Skill: `tools-only/micro-interactions-satisfying-experience` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/micro-interactions-satisfying-experience`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/micro-interactions-satisfying-experience/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/micro-interactions-satisfying-experience

---

# Micro-Interactions: Satisfying Experience

## SATISFYING: Adding Micro-Interactions

### Duration Guidelines
- **General micro-interactions**: 150-300ms (avoid interrupting flow)
- **Button presses**: Start within 16ms of click
- **Standard animations**: 200-500ms
- **UI motions**: 0.5-2s typically
- **Rule**: A tenth of a second makes big difference; half second wrong feels jarring

### Basic Effects
- **Fade**: Smooth opacity transitions
- **Slide**: Directional movement (left/right/up/down)
- **Scale**: Size changes (grow/shrink)
- **Rotate**: Angular transformations
- Sequential timing with 0.1s delays between elements

### Easing Curves
Linear motion = robotic. Use easing for natural feel:

**Ease-out** (starts fast, slows down):
- Best for: Elements entering screen
- Makes animation feel responsive
- Allows eye time to focus as element settles
- Most common for UI micro-interactions

**Ease-in** (starts slow, speeds up):
- Best for: Elements leaving screen
- Natural exit motion

**Spring/bounce**:
- Playful, energetic feel
- Use sparingly for emphasis

**Cubic-bezier**:
- Fine-tuned control over motion curves
- Custom easing for specific needs

### Motion Characteristics
- Follow real-world physics (objects speed up when starting, slow down when stopping)
- Subtle curves for micro-interactions
- Bolder curves for attention-grabbing transitions
- Always have purpose—guide users or give feedback

### Performance
- Aim for smooth 60fps
- Prefer hardware-accelerated properties (transforms, opacity)
- Avoid fancy effects causing frame drops or battery drain
- Provide motion-reduced alternatives for accessibility

### Resources
Study 21st.dev for component animations & subtle effects worth emulating.