28 lines
1.6 KiB
Markdown
28 lines
1.6 KiB
Markdown
# 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
|