Motion

themes specs/themes/motion.kmd

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.

When this spec applies

Primary triggers

Add or modify motion in any Koder surface

All triggers

Animate any UI state change (hover, focus, modal entry, etc.)
Implement a transition between screens
Tune timing/easing of an existing animation

Spec — Motion (index)

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 — stiffness/damping/mass)
`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.kmd R4
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 flip/cube → motion/spatial.kmd

Every animation MUST honor the reduced-motion contract — see motion/physics.kmd#R1.

References

specs/themes/motion/physics.kmd
specs/themes/motion/easing-duration.kmd
specs/themes/motion/transitions.kmd
specs/themes/motion/spatial.kmd
specs/themes/ui-style.kmd
specs/interaction/states.kmd