Primitive 04

Motion system panel

Duration × easing tokens with a live scrubber. The dot rides the active easing curve so you can feel the rhythm before adopting it.

Production answer

Motion system panel is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Motion system panel states
Generative search brief

Motion system panel: Duration × easing tokens with a live scrubber. The dot rides the active easing curve so you can feel the rhythm before adopting it.

Three states

Default mid-tempo (Normal × Standard), a snappier UI-tier preview, and a slow cinematic preview. The scrubber respects prefers-reduced-motion.

State 01 · Normal · Standard
Umbrella · Motion

Motion system

Duration × easing tokens with a live scrubber. Respects reduced motion.

280ms
Duration tokens
Easing tokens
cubic-bezier(0.16, 1.00, 0.30, 1.00)
State 02 · Fast · Snappy
Umbrella · Motion

Motion system

Duration × easing tokens with a live scrubber. Respects reduced motion.

180ms
Duration tokens
Easing tokens
cubic-bezier(0.65, 0.00, 0.35, 1.00)
State 03 · Epic · Muffler torque
Umbrella · Motion

Motion system

Duration × easing tokens with a live scrubber. Respects reduced motion.

920ms
Duration tokens
Easing tokens
cubic-bezier(0.22, 1.40, 0.36, 1.00)