ux-animation-motion

What problem does it solve?

This Skill standardizes and reuses motion patterns to improve UI responsiveness, feedback, and accessibility. It covers hover effects, transitions, loading animations, and celebratory moments with reduced motion handling.

Core Features & Use Cases

• Animation Library Integration: Works with Anime.js v4 for consistent, high-quality motion.
• Reusable Patterns: Press, shake, glow, bounce, fade, slide, and staggered animations for common UI feedback.
• Reduced Motion: Built-in support and fallbacks for users who prefer reduced motion.
• Real-World Use Case: Add a success celebration for form submission that shakes on error, then plays a success bounce and glow when the action completes.

Quick Start

Use the animation module to animate a button on click using the project's Anime.js wrappers. If your users prefer reduced motion, skip the animation and apply the instant state change fallback.