---
description: Animation timing, easing, stagger patterns, and motion design principles
alwaysApply: false
globs: **/*.{ts,tsx,js,jsx,vue,css,scss}
---

# Animation Principles & Motion Design

## Core Philosophy

Every animation should serve one of these purposes:
- **Guide Attention**: Direct user focus to important elements
- **Provide Feedback**: Confirm actions and state changes
- **Show Relationships**: Reveal spatial and hierarchical connections
- **Enhance Perception**: Make loading and transitions feel faster
- **Add Delight**: Create memorable micro-interactions

## Duration Guidelines

```javascript
const durations = {
  instant: 100,      // Micro-feedback (hover states)
  fast: 200,         // Small elements (tooltips, dropdowns)
  moderate: 300,     // Standard UI transitions (modals, cards)
  normal: 500,       // Page sections, complex components
  slow: 600,         // Hero animations, page transitions
};
```

## Easing Functions

- **ease-out**: 90% of entrance animations (fade in, slide in)
- **ease-in**: Exit animations (fade out, slide out)
- **ease-in-out**: Position changes, transforms
- **spring**: Playful interactions, emphasis
- **linear**: Progress bars, loading spinners

## Staggered Animation Pattern

```javascript
// Delay calculation
const staggerDelay = (index, baseDelay = 100) => index * baseDelay;
```

Guidelines:
- Delay increment: 50-150ms between items
- Max items: Limit to 6-8 visible items
- Direction: Top-to-bottom or left-to-right

## Reduced Motion Accessibility

Always respect `prefers-reduced-motion` settings:

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

## Performance

- ✅ Animate `transform` and `opacity` only
- ✅ Use `will-change` sparingly
- ✅ Limit simultaneous animations
- ❌ Don't animate `width`, `height`, `top`, `left`