Motion — Easing & Duration

themes specs/themes/motion/easing-duration.kmd

Duration tokens (5) and easing curves (5) for every deterministic Koder UI animation. The "how long + what curve" half of Motion (physics, springs, and reduced-motion contract live in `physics.kmd`).

Quando esta spec se aplica

Triggers primários

Add or modify a deterministic timed animation in any Koder surface

Todos os triggers

Pick a duration for an animation
Pick an easing curve for an animation
Tune timing on an existing transition

Spec — Motion: Easing & Duration

Facet Visual do Koder Design. Material parity: https://m3.material.io/styles/motion/easing-and-duration/tokens-specs.

R1 — Duration tokens

Token	ms	Use
`motion-instant`	0-50	Focus ring, ripple onset, immediate ack
`motion-fast`	100-200	Hover, switch toggle, button press
`motion-medium`	200-300	Modal entry/exit, drawer slide
`motion-slow`	300-500	Coordinated multi-element (FAB morph), page transition
`motion-long`	500-700	Onboarding choreography, hero animation (landing only)

Concrete defaults at material3 preset:

motion-instant: 50ms
motion-fast: 150ms
motion-medium: 250ms
motion-slow: 400ms
motion-long: 600ms

Per-preset variation: terminal_classic uses 0ms (no animation — matches CRT feel); cyberpunk_neon uses 1.2× durations (deliberate slower pulses); brutalist uses 0ms (intentional sharpness).

R2 — Easing tokens

Token	Curve	Use
`ease-standard`	cubic-bezier(0.2, 0, 0, 1)	Default for on-screen change
`ease-decelerate`	cubic-bezier(0, 0, 0, 1)	Entering — element arriving
`ease-accelerate`	cubic-bezier(0.3, 0, 1, 1)	Exiting — element leaving
`ease-emphasize`	cubic-bezier(0.2, 0, 0, 1) (longer)	High-attention motion
`linear`	linear	Loaders, progress, looping motion

Linear is the only allowed curve for indefinite motion (loaders); all discrete animations use one of the eased curves.

R3 — Decision tree

Property animated:
├── opacity / color → ease-standard (in), ease-accelerate (out)
├── position / scale (entering) → ease-decelerate
├── position / scale (exiting)  → ease-accelerate
├── coordinated multi-element  → ease-emphasize
└── indefinite progress         → linear

Duration picking:
├── State acknowledgment (focus, ripple)    → motion-instant
├── Single property tween (hover, toggle)   → motion-fast
├── Element entry/exit (modal, drawer)      → motion-medium
├── Coordinated transition (FAB morph)      → motion-slow
└── Hero choreography (landing only)        → motion-long

Cross-link

motion.kmd — index over all Motion sub-specs
motion/physics.kmd — spring tokens, reduced-motion contract
motion/transitions.kmd — transition patterns using these tokens
themes/ui-style.kmd — per-preset motion variation

Referências

specs/themes/motion.kmd
specs/themes/motion/physics.kmd
specs/themes/motion/transitions.kmd
specs/themes/ui-style.kmd