interaction-design

name	interaction-design
description	Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, creating gesture-based interactions, designing hover/focus states, building notification/toast systems, adding scroll-triggered animations, implementing drag-and-drop, or creating delightful user experiences.

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 transform and opacity only 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