Loading...
Loading...
Found 10 Skills
Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations.
Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication
Tailwind CSS animations and transitions including built-in utilities and custom animation patterns
Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention
Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible
Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive
Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.
Create performant CSS animations, transitions, and motion design
Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.