1---
 2tagline: "Purposeful motion that conveys state, not decoration."
 3---
 4
 5## When to use it
 6
 7`/animate` is for interfaces that feel lifeless, where state changes are instant and jarring, where loading just pops in, where the user never quite trusts that their click registered. Use it to add the small motions that communicate what is happening: entrances, exits, feedback, transitions between states.
 8
 9Do not use it to add bounces or elastic springs for the sake of energy. That is decoration, and this skill will not give it to you.
10
11## How it works
12
13The skill identifies static moments that would benefit from motion, then applies them with strict discipline:
14
151. **Entrances and exits**: elements appear and leave with 200 to 300ms fades plus subtle Y or scale, never layout properties.
162. **State feedback**: hover, active, focus, loading, success all communicate via motion instead of sudden swaps.
173. **Transitions between views**: shared-element transitions where it makes sense, fade-through otherwise.
184. **Progress and loading**: skeleton screens, determinate bars, motion that says "still working".
195. **Reduced motion**: every animation has a `prefers-reduced-motion` fallback.
20
21Easing is always exponential (ease-out-quart, quint, or expo) because real objects decelerate smoothly. No bounce, no elastic, no linear for anything except progress indicators.
22
23The skill animates `transform` and `opacity` only. If you find yourself animating `width`, `height`, `top`, or `left`, it is doing the wrong thing. Use `grid-template-rows` for height transitions.
24
25## Try it
26
27```
28/animate the sign-up flow
29```
30
31Typical additions:
32
33- Email input gets a focus glow on focus-visible (opacity + shadow, 180ms)
34- Submit button shows a spinner inside itself on loading state, not a separate spinner next to it
35- Success screen enters with opacity + translateY(8px), 260ms, ease-out-quart
36- Error message slides down with grid-template-rows (not height), 220ms
37- `@media (prefers-reduced-motion: reduce)` fallback for every transition
38
39## Pitfalls
40
41- **Asking for "more animation".** Animate is not a dial. It adds where motion communicates, not everywhere.
42- **Removing the reduced-motion fallbacks.** The skill adds them automatically. Non-negotiable for accessibility.