1.6 KiB
1.6 KiB
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