ux-animation-motion_skill

Overview

This skill provides a collection of Anime.js v4 motion patterns and utilities tailored for UI feedback, transitions, and playful celebrations in a fantasy-themed phonics game. It includes ready-made micro-interactions, transition patterns, reduced-motion handling, and performance guidelines to keep animations accessible and performant. Use these patterns to add tactile feedback, celebrate word completions, and animate state changes consistently across components.

How this skill works

The skill exposes reusable animation patterns (press, shake, success bounce, glow, staggered lists) and duration/easing constants to standardize timing. It wraps direct Anime.js calls with a safeAnimate helper that respects prefers-reduced-motion and falls back to instant state changes when needed. Animations focus on transform and opacity for smooth rendering and include CSS fallbacks for simple state transitions and loading visuals.

When to use it

• Button presses, taps, and micro-interactions to provide tactile feedback
• Component transitions such as fade/slide/scale when entering or leaving view
• Celebrations: word completion, achievement unlocks, and score updates
• Form validation or errors using shake patterns
• Loading states: spinners and animated dots for async UI feedback

Best practices

• Prefer transform and opacity properties to keep animations at 60fps
• Keep interaction animations short (under ~300ms) and consistent with duration constants
• Respect prefers-reduced-motion: use safeAnimate to apply final states immediately
• Use CSS transitions for simple state changes and reserve JS animations for complex sequences
• Cancel or pause animations when elements unmount to avoid memory leaks

Example use cases

• Scale a button quickly on tap with pressEffect(element) for instant tactile feedback
• Celebrate a correct word with successBounce + glow on the word element
• Show a staggered list when revealing hints or level rewards using delay per item
• Animate badge unlock with scale+rotate for a playful achievement celebration
• Replace full-motion sequences with instant class changes when reduced motion is enabled