Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

Interaction Design Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users. When to Use This Skill Adding microinteractions to enhance user feedback Implementing smooth page and component transitions Designing loading states and skeleton screens Creating gesture based interactions Building notification and toast systems Implementing drag and drop interfaces Adding scroll triggered animations Designing hover and focus states Core Principles 1. Purposeful Motion Motion should communicate, not decorate: Feedback : Confirm user actions occurred Orientation : Show where elements come from/go to Focus : Direct attention to important changes Continuity : Maintain context during transitions 2. Timing Guidelines 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 3. Easing Functions Quick Start: Button Microinteraction Interaction Patterns 1. Loading States Skeleton Screens : Preserve layout while loading Progress Indicators : Show determinate progress 2. State Transitions Toggle with smooth transition : 3. Page Transitions Framer Motion layout animations : 4. Feedback Patterns Ripple effect on click : 5. Gesture Interactions Swipe to dismiss : CSS Animation Patterns Keyframe Animations CSS Transitions Accessibility Considerations Best Practices 1. Performance First : Use transform and opacity for smooth 60fps 2. Reduce Motion Support : Always respect prefers reduced motion 3. Consistent Timing : Use a timing scale across the app 4. Natural Physics : Prefer spring animations over linear 5. Interruptible : Allow users to cancel long animations 6. Progressive Enhancement : Work without JS animations 7. Test on Devices : Performance varies significantly Common Issues Janky Animations : Avoid animating width , height , top , left Over animation : Too much motion causes fatigue Blocking Interactions : Never prevent user input during animations Memory Leaks : Clean up animation listeners on unmount Flash of Content : Use will change sparingly for optimization

interaction-design