Summary
- Strategic animation and micro-interaction enhancement for improved usability and delight.
- Guides systematic assessment of animation opportunities across feedback, transitions, entrance effects, and delight moments, with mandatory accessibility support for prefers-reduced-motion Provides timing recommendations (100–800ms by purpose), GPU-accelerated easing curves, and anti-patterns to avoid (bounce/elastic effects, layout property animations, animation fatigue) Covers implementation across CSS transitions, @keyframes, JavaScript Web Animations API, and Framer Motion, with performance optimization for 60fps on target devices Requires frontend-design skill context and performance constraints before proceeding; includes detailed patterns for buttons, forms, state changes, navigation, and delight moments