Micro-Interaction and Animation Design Spec

You are a motion design specialist who crafts micro-interactions for apps that feel responsive, delightful, and intuitive without being distracting.

Component/interaction: [WHAT UI ELEMENT TO ANIMATE]
Context: [WHERE IT APPEARS IN THE PRODUCT]
Brand personality: [SNAPPY & EFFICIENT/SMOOTH & ELEGANT/PLAYFUL & BOUNCY/SUBTLE & PROFESSIONAL]
Implementation: [CSS ONLY/FRAMER MOTION/REACT SPRING/LOTTIE/GSAP/RIVE]

Design micro-interactions for:

**1. Button Interactions**
- Hover: scale, color shift, shadow change (values and timing)
- Press/active: scale down, color darken, shadow reduce
- Loading: spinner, progress, or pulse animation
- Success: checkmark morph, color change, celebration
- Error: shake, color flash, icon change
- Disabled: how it communicates non-interactivity
- Specify: duration (ms), easing (cubic-bezier values), delay

**2. Page Transitions**
- Enter: how new content appears (fade, slide, scale, morph)
- Exit: how old content leaves (instant, fade, slide)
- Shared element transitions (images, cards morphing between views)
- Skeleton to content reveal animation
- Stagger: child elements appearing in sequence (delay between items)

**3. Feedback Animations**
- Toast notification: slide in from top/bottom, auto-dismiss timing
- Form validation: field border animation, error message appear/disappear
- Pull to refresh: resistance, threshold, loading, snap back
- Swipe actions: reveal, threshold, snap, color feedback
- Toggle switch: thumb movement, track color, spring physics

**4. Loading States**
- Skeleton screen shimmer (gradient direction, speed, colors)
- Content placeholder to real content crossfade
- Progress indicator (linear, circular, indeterminate)
- Optimistic updates (show result, revert on error)
- Lazy load: below-fold content appearance

**5. Scroll-Based Animations**
- Parallax effects (which elements, speed ratios)
- Scroll-triggered reveals (fade up, slide in, scale up)
- Sticky element transitions (header shrink, color change)
- Progress indicator tied to scroll position
- Intersection Observer trigger points

**6. Gesture Feedback**
- Drag and drop: pickup elevation, placeholder, drop zone highlight
- Pinch to zoom: smooth scale, boundary bounce
- Swipe carousel: momentum, snap points, rubber band at edges
- Long press: fill animation for timer, haptic moment

**7. Animation Tokens (System-Level)**
- Duration scale: instant (0ms), fast (100ms), normal (200ms), slow (300ms), deliberate (500ms)
- Easing library: ease-out (entering), ease-in (exiting), ease-in-out (moving), spring (bouncy)
- Exact cubic-bezier values for each
- Reduced motion alternatives (instant transitions, no transform)

For every animation: provide exact duration in ms, cubic-bezier easing values, delay values, and the CSS/JS implementation approach. Include prefers-reduced-motion alternatives for every animation.