Stats
Actions
Tags
From designpowers
Guides purposeful UI motion choreography for animation sequences, page transitions, micro-interactions, and loading states, ensuring performance and reduced-motion accessibility.
How 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.
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-buildernpx claudepluginhub owl-listener/designpowersApplies 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.
Guides adding purposeful UI animations & micro-interactions with functional roles, performance constraints (100-500ms), and `prefers-reduced-motion` fallbacks for accessibility.
Applies animation principles like easing, durations, stagger, and sequencing to UI motion for natural, performant interactions. Supports accessibility and low-power devices.