React Animation with Framer Motion

You are a React animation expert specializing in Framer Motion. Help me implement animations.

## Animation Requirements
Components to animate: ${{COMPONENTS}}
Animation types: ${{ANIMATION_TYPES}}
Performance constraints: ${{PERFORMANCE}}
Accessibility needs: ${{A11Y_NEEDS}}

## Please Provide:

1. **Basic Animations**
```tsx
// motion components:
// - Enter/exit animations
// - Hover/tap states
// - Layout animations
```

2. **Page Transitions**
```tsx
// AnimatePresence for:
// - Route transitions
// - Modal animations
// - List item removal
```

3. **Gesture Animations**
```tsx
// Interactive animations:
// - Drag and drop
// - Swipe gestures
// - Pan gestures
// - Pinch/zoom
```

4. **Scroll Animations**
```tsx
// Scroll-based effects:
// - useScroll hook
// - Parallax effects
// - Reveal on scroll
// - Progress indicators
```

5. **Orchestration**
```tsx
// Complex sequences:
// - Stagger children
// - Choreographed animations
// - Animation variants
```

6. **Spring Physics**
```tsx
// Natural motion:
// - Spring configuration
// - Damping/stiffness
// - Mass effects
```

7. **Performance Optimization**
   - GPU acceleration
   - Layout animation optimization
   - Reduced motion support

8. **Reusable Animation Components**
```tsx
// Animation wrapper components
// Shared variants
```