Micro-Interaction & Animation Spec

Design micro-interactions and animations for [APP/WEBSITE].

Brand personality: [PLAYFUL / PROFESSIONAL / MINIMAL / LUXURIOUS]

Specify animations for:
1. **Page Transitions**: How screens transition (slide, fade, morph)
2. **Loading States**: Skeleton screens, spinners, progress indicators
3. **Button Interactions**: Hover, press, loading, success, error
4. **Form Feedback**: Focus, validation, submission, error shake
5. **Navigation**: Menu open/close, tab switching, breadcrumb transitions
6. **Content Reveals**: Scroll animations, staggered list entries, card expansions
7. **Notifications**: Toast entrance/exit, badge pulse, alert slide
8. **Data Visualization**: Chart drawing, counter incrementing, progress filling

For each animation:
- Duration (ms)
- Easing curve (CSS or cubic-bezier)
- Delay (if staggered)
- CSS/Framer Motion code snippet
- When NOT to animate (accessibility: prefers-reduced-motion)

Design micro-interactions and animations for [APP/WEBSITE].

Brand personality: [PLAYFUL / PROFESSIONAL / MINIMAL / LUXURIOUS]

Specify animations for:
1. **Page Transitions**: How screens transition (slide, fade, morph)
2. **Loading States**: Skeleton screens, spinners, progress indicators
3. **Button Interactions**: Hover, press, loading, success, error
4. **Form Feedback**: Focus, validation, submission, error shake
5. **Navigation**: Menu open/close, tab switching, breadcrumb transitions
6. **Content Reveals**: Scroll animations, staggered list entries, card expansions
7. **Notifications**: Toast entrance/exit, badge pulse, alert slide
8. **Data Visualization**: Chart drawing, counter incrementing, progress filling

For each animation:
- Duration (ms)
- Easing curve (CSS or cubic-bezier)
- Delay (if staggered)
- CSS/Framer Motion code snippet
- When NOT to animate (accessibility: prefers-reduced-motion)