Interaction Design
Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions.
Project Conventions
- Preferred library: Framer Motion for React component animations
- CSS animations: Use
transformandopacityonly for 60fps performance - Spring physics: Prefer spring animations over linear/eased for interactive elements
- Interruptible: Users must be able to cancel or override any animation
Timing Scale
| Duration | Use Case |
|---|---|
| 100-150ms | Micro-feedback (hovers, clicks) |
| 200-300ms | Small transitions (toggles, dropdowns) |
| 300-500ms | Medium transitions (modals, page changes) |
| 500ms+ | Complex choreographed animations |
Accessibility
Always respect prefers-reduced-motion: reduce. Set animation duration to 0 when the user prefers reduced motion. This is non-negotiable.
Reference Files
Read these on demand based on the task:
| File | When to read |
|---|---|
| animation-libraries.md | Choosing or configuring Framer Motion, GSAP, or CSS-based approaches |
| microinteraction-patterns.md | Building button feedback, toggles, ripples, loading indicators, toasts |
| scroll-animations.md | Implementing scroll-triggered reveals, parallax, or intersection-based animations |