Animation & Motion Guidelines

You are a motion design specialist who creates animation guidelines for digital product design systems. You understand that motion should be purposeful, enhancing usability rather than decorating interfaces. Create a complete motion guidelines document.

**Product/Brand:** [YOUR PRODUCT/BRAND]
**Platform:** [WEB / iOS / ANDROID / CROSS-PLATFORM]
**Brand Personality in Motion:** [e.g., "Snappy and efficient", "Smooth and elegant", "Playful and bouncy", "Subtle and refined"]
**Animation Library/Tool:** [CSS TRANSITIONS / FRAMER MOTION / REACT SPRING / GSAP / LOTTIE / NATIVE / RECOMMEND]
**Performance Priority:** [HIGH (must stay 60fps on low-end devices) / MODERATE / CREATIVE-FIRST]

**Generate complete Animation & Motion Guidelines:**

**1. Motion Principles (3-5 Core Principles)**
For each principle:
- Name (e.g., "Purposeful", "Natural", "Responsive", "Consistent", "Accessible")
- What it means in practice
- A good example and a bad example
- How to evaluate if an animation follows this principle

**2. Timing System**
Define a standard set of durations:
| Token | Duration | Use Case |
|-------|----------|----------|
| instant | 0ms | State changes with no visual transition |
| micro | 50-100ms | Button press feedback, checkbox toggle |
| fast | 100-200ms | Hover states, tooltips, small element transitions |
| normal | 200-300ms | Modal open/close, drawer slide, card flip |
| slow | 300-500ms | Page transitions, complex reveals, accordion expand |
| deliberate | 500-800ms | Onboarding animations, celebration moments |

- When to use each duration
- Rule: "Animations users trigger feel faster; system-initiated animations feel more deliberate"

**3. Easing Curves**
For each easing curve, provide:
- Name, CSS cubic-bezier value, and visual description
- **Ease-out** (deceleration): for elements entering the viewport
- **Ease-in** (acceleration): for elements leaving the viewport
- **Ease-in-out**: for elements moving position on screen
- **Spring/bounce**: for playful emphasis moments (if brand-appropriate)
- **Linear**: when to use (progress bars, continuous motion)
- Anti-pattern: which easing to never use and why

**4. Transition Patterns**
Define standard transitions for common UI interactions:
- **Enter/Exit**: fade, slide (direction), scale, slide+fade combo
- **Layout shifts**: height/width animation, reorder, add/remove from list
- **Navigation**: page-to-page, tab switching, drill-down, back
- **Overlays**: modal, drawer, bottom sheet, popover, tooltip
- **Feedback**: loading spinner, skeleton shimmer, success checkmark, error shake
- **Microinteractions**: button press, toggle switch, checkbox, radio button, like/favorite

For each pattern:
- Property being animated (opacity, transform, height, etc.)
- Duration token to use
- Easing curve to use
- Direction/origin (e.g., "Modals scale from center, drawers slide from edge")

**5. Choreography**
- Staggered animations: delay between sequential elements (e.g., list items loading one by one)
- Coordinated motion: how multiple elements animate in relation to each other
- Hierarchy: more important elements animate first or more prominently
- Maximum simultaneous animations: limit to prevent visual chaos

**6. Accessibility**
- Respect prefers-reduced-motion media query: what alternative to provide
- Reduced motion is not no motion: what minimal feedback to retain
- Avoiding seizure triggers: no flashing above 3 times per second
- Users with vestibular disorders: avoid parallax, large-scale motion, auto-scrolling
- Implementation example: code snippet for reduced motion handling

**7. Performance Guidelines**
- Only animate transform and opacity on the GPU-composited layer
- Avoid animating width, height, top, left (cause layout recalculation)
- will-change usage: when to apply and when to remove
- Mobile performance budget: max number of simultaneous animations
- Testing: tools for measuring animation performance (Chrome DevTools, Instruments)

**8. Implementation Reference**
- Code examples for 3 common animations in the chosen animation library
- Shared animation presets/configs for the engineering team
- Naming convention for animation tokens and variants

Format as a design system documentation page with clear sections, tables for timing and easing values, and descriptive text for principles and patterns.