Loading...
Loading...
Found 12 Skills
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.
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
Create performant CSS animations, transitions, and motion design
Tailwind CSS animations and transitions including built-in utilities and custom animation patterns
Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible
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 implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.
Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive
Implement, review, and measure UI motion. Reconstruct easing, springs and gestures from a recording using bundled frame extraction, tracking and curve-fitting tools when available.