Motion
Motion in Koder UI — index over 4 sub-specs: physics (principles + springs + reduced-motion), easing-duration (tokens), transitions (pattern catalog), spatial (parallax + 3D transitions / perceived depth). Material parity broken into discoverable pages.
Facet Visual do Koder Design. Material parity: https://m3.material.io/styles/motion.
Motion in Koder UI is documented as 4 discoverable sub-specs. Pick the one that matches your task:
| Sub-spec | What it covers |
|---|---|
motion/physics.kmd |
Principles, performance budget, forbidden patterns, reduced-motion contract, and spring tokens (Material 3 Expressive — stiffnessdampingmass) |
motion/easing-duration.kmd |
5 duration tokens (motion-instant → motion-long) and 5 easing curves (ease-standard, ease-decelerate, ease-accelerate, ease-emphasize, linear) |
motion/transitions.kmd |
7 transition patterns (fade, scale, slide, container transform, shared axis, push/pop, cross-fade), per-state motion, page-level transitions |
motion/spatial.kmd |
Perceived-depth motion: pointer/gyroscope parallax, depth-on-scroll, and 3D transitions (flip, cube, perspective shared-element). Projects the depth axis on flat surfaces |
Quick decision
- Animation interruptible mid-flight (drag, fling) → spring tokens in
motion/physics.kmdR4 - Deterministic timed transition → duration + easing in
motion/easing-duration.kmd - Screen-to-screen or modal entry → pattern catalog in
motion/transitions.kmd - Parallax, depth-on-scroll, or a 3D flipcube → [`motionspatial.kmd`](motion/spatial.kmd)
Every animation MUST honor the reduced-motion contract — see motion/physics.kmd#R1.