Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From designpowers
Guides purposeful UI motion choreography for animation sequences, page transitions, micro-interactions, and loading states, ensuring performance and reduced-motion accessibility.
npx claudepluginhub owl-listener/designpowersHow this skill is triggered — by the user, by Claude, or both
Slash command
/designpowers:motion-choreographyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.
Applies Disney's 12 animation principles to UI motion: easing curves, duration guidelines, choreography, and reduced-motion accessibility. Use when designing state changes, transitions, or motion systems.
Applies animation principles like easing, durations, stagger, and sequencing to UI motion for natural, performant interactions. Supports accessibility and low-power devices.
Motion design skill for defining and implementing UI animations, transitions, and micro-interactions using Framer Motion, CSS, and Tailwind. Creates reusable motion tokens and performs 60fps animations.
Share bugs, ideas, or general feedback.
Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.
Before adding any animation:
Can't answer at least one? The animation is decoration. Cut it.
| Context | Duration |
|---|---|
| Micro-interaction (button, toggle) | 100-200ms |
| State change (card expand, tab) | 200-300ms |
| Screen transition | 250-400ms |
| Complex choreography | 400-700ms total |
Nothing over 1 second unless it's a loading indicator.
| Context | Easing |
|---|---|
| Entering | ease-out (decelerate) |
| Leaving | ease-in (accelerate) |
| State change | ease-in-out |
| Micro-interaction | spring (stiffness 300-500) |
prefers-reduced-motion: reduce means reduce, not remove.
| Standard | Reduced alternative |
|---|---|
| Slide in | Fade in |
| Scale with bounce | Instant appearance |
| Parallax scroll | Static |
| Staggered reveal | Simultaneous fade |
| Continuous pulse | Static state |
Every animation must have a reduced-motion alternative. No exceptions.
Only animate: transform, opacity, filter. These are GPU-composited.
design-lead, interaction-designmotion-designer agent, accessibility-reviewer, design-builder