# Animation & Micro-interactions

## Motion Principles
**Motion Design Philosophy:** Purposeful animation that provides feedback, guides attention, and maintains spatial relationships during AI operations

## Key Animations

### AI Processing Indicators
- **AI Prompt Processing:** Pulsing dots animation with staggered timing (Duration: 1.2s, Easing: ease-in-out, Loop: infinite)
- **Task Generation:** Progress bar with shimmer effect showing AI "thinking" (Duration: 0.8s, Easing: cubic-bezier(0.4, 0, 0.6, 1))
- **Content Streaming:** Typewriter effect for AI-generated task descriptions (Duration: variable, Easing: linear)

### Status & State Changes
- **Task Status Update:** Smooth color transition with subtle scale pulse (Duration: 300ms, Easing: ease-out)
- **Sync Status Changes:** Icon rotation for syncing state, check mark bounce for success (Duration: 200ms, Easing: spring)
- **Bulk Operation Progress:** Coordinated stagger animation showing batch progress (Duration: 150ms per item, Easing: ease-out)

### AI-Specific Motion Language
- **Thinking:** Slow, rhythmic pulsing (1.2s cycle) with soft indigo glow
- **Analyzing:** Faster pulsing (0.8s cycle) with scanning line effect  
- **Generating:** Particle effect suggesting content creation
- **Complete:** Satisfying "pop" animation with check mark reveal

## Performance Considerations
- **CSS Transforms Only:** Use transform and opacity for smooth hardware acceleration
- **Reduced Motion Respect:** All animations disable cleanly with `prefers-reduced-motion`
- **Mobile Performance:** Limit concurrent animations to 3 maximum on mobile devices