Framework motion contract
Framework's visual roles remain authoritative. Use LottieFiles' motion-design skill to choose intent, timing and choreography within that direction. UI uses the precise Corporate character; optional Soft/Playful brand studies are explicit experiments. Do not add shadows, particles, color roles or ambient loops merely because a generic motion recipe suggests them.
| Role | Duration | Use |
|---|---|---|
| Quick | 120ms | Micro feedback and select/menu response |
| Standard | 240ms | Compact state changes |
| Slow | 480ms | Coordinated arrival |
| Drawer entrance / dismissal | 320 /200ms | Preserve context; exit promptly |
| Data transition | 720ms total | Includes setup and settling around the interpolation |
| Export illustration | 2600ms | Example workflow sequence, not a button transition |
| Brand reveal | 1400ms | User-initiated signature study |
src/motion/index.js supplies frozen duration/easing roles, clamp and a cubic-bezier evaluator with exact endpoints. CSS tokens provide the same UI roles. Do not confuse complete example workflow duration with a component transition duration.
Every motion has an intent: feedback builds confidence, data preserves understanding, drawers preserve orientation, brand recognition adds restrained character. Match the timing to that job. Final state must be independent of intermediate frames. Pressing Escape repeatedly cannot restart closing; reduced motion must settle paused opening/closing; moving offscreen content must not receive focus.
Keep visible pause/dismissal controls reachable when exposing playback or scrubbing. Capture the real activated opener explicitly, contain modal scrolling and return focus when it closes. Announce discrete results; per-frame timecodes are not live regions. Defaults respect system reduced motion. UI overrides are local to the example.
Tests cover endpoints, monotonicity, expressive overshoot, invalid input, interruption, repeat cancellation, actual opener return and reduced-motion settling. Browser evidence remains necessary for geometry and native focus routing.
Playable component studies (2.1)
The eight component studies join the four original workflow studies. Button press, checkbox stroke, switch travel, shared tab indicator, natural-height disclosure, menu arrival, tooltip reveal and row choreography each provide play/pause, restart, keyboard scrubbing, 0.25× preview and immediate final-state reduced motion. They start paused and never loop automatically. These are motion studies, with links to real components; the study does not imply every runtime primitive animates identically.
The reusable controller lives in src/motion/study.js (also exported from motion/index.js and package subpath ./motion-study). createStudy({duration, render, update}) drives normalized progress. play(), pause(), seek(0..1), restart(), setSpeed(positive), setReduced(boolean), destroy() own finite playback. render receives progress; update receives {progress,playing,reduced}. Inject request/cancel functions for testing. The consumer combines OS preference with optional local reduction; local settings cannot override OS reduction. Dispose observers/listeners alongside the controller. Natural-height content must be remeasured when its container changes size.