--- 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, 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 ```css /* Common easings */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot - playful */ ``` ## Quick Start: Button Microinteraction ```tsx import { motion } from "framer-motion"; export function InteractiveButton({ children, onClick }) { return ( {children} ); } ``` ## Interaction Patterns ### 1. Loading States **Skeleton Screens**: Preserve layout while loading ```tsx function CardSkeleton() { return (

); } ``` **Progress Indicators**: Show determinate progress ```tsx function ProgressBar({ progress }: { progress: number }) { return (

); } ``` ### 2. State Transitions **Toggle with smooth transition**: ```tsx function Toggle({ checked, onChange }) { return ( ); } ``` ### 3. Page Transitions **Framer Motion layout animations**: ```tsx import { AnimatePresence, motion } from "framer-motion"; function PageTransition({ children, key }) { return ( {children} ); } ``` ### 4. Feedback Patterns **Ripple effect on click**: ```tsx function RippleButton({ children, onClick }) { const [ripples, setRipples] = useState([]); const handleClick = (e) => { const rect = e.currentTarget.getBoundingClientRect(); const ripple = { x: e.clientX - rect.left, y: e.clientY - rect.top, id: Date.now(), }; setRipples((prev) => [...prev, ripple]); setTimeout(() => { setRipples((prev) => prev.filter((r) => r.id !== ripple.id)); }, 600); onClick?.(e); }; return ( ); } ``` ### 5. Gesture Interactions **Swipe to dismiss**: ```tsx function SwipeCard({ children, onDismiss }) { return ( { if (Math.abs(info.offset.x) > 100) { onDismiss(); } }} className="cursor-grab active:cursor-grabbing" > {children} ); } ``` ## CSS Animation Patterns ### Keyframe Animations ```css @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { to { transform: rotate(360deg); } } .animate-fadeIn { animation: fadeIn 0.3s ease-out; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } .animate-spin { animation: spin 1s linear infinite; } ``` ### CSS Transitions ```css .card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } ``` ## Accessibility Considerations ```css /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ``` ```tsx function AnimatedComponent() { const prefersReducedMotion = window.matchMedia( "(prefers-reduced-motion: reduce)", ).matches; return ( ); } ``` ## 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