atelier-motionlisted

# Atelier — Motion & Micro-interactions Motion is what separates a premium interface from a static one — and bad motion (too slow, too much, wrong easing, animating the wrong property) instantly reads cheap. The rule that governs everything here: **motion should be felt, not seen.** If the user consciously waits on an animation, it's too slow or too big. > **Inputs:** the Direction Doc's *motion budget* (none / restrained / award-grade). **Default stack:** > Motion (`motion/react`) for component/gesture/layout/exit animation; GSAP for complex sequencing; > **scroll-driven motion → `atelier-scroll`**; **the perf/a11y gate → `atelier-perf-a11y`** (animate > only `transform`/`opacity`, respect reduced motion); **where these hooks mount in a real component tree > → `atelier-components`.** Deep reference: `references/fundamentals-deepdive.md` > (§1, §5). --- ## The flow 1. **Set the budget** (from the Direction Doc) → 2. **Pick durations + easing** → 3. **Choose the tool** → 4. **Build the interaction** → 5. **Add the missing states** → 6. **Gate it** (reduced motion + perf). ## 1. Motion budget Match motion to the world (Direction Doc): - **Production** — purposeful only: feedback (<100ms), state changes, attention guidance, latency masking. Durations ≤300ms, one thing moving at a time. Restraint reads as confidence. - **Award/creative** — motion is part of the brand; bigger gestures, choreography, signature moments. Still ships reduced-motion fallbacks. When in doubt,