Guidelines / Geometry & Motion

Motion

Mechanical: 100–320ms, No Bounce. Cursor Blink + Sweep

01 Preview

02 Rule

mechanical easing, 100–320ms, no bounce or parallax. Hover shifts color; press darkens one step.

03 Tokens

Token	Value
--dur-1	`100ms`
--dur-2	`180ms`
--dur-3	`320ms`
--ease-mech	`cubic-bezier(0.2, 0, 0, 1)`
--ease-step	`steps(2, end)`

Defined in src/tokens/motion.css. Use these via var(--name) rather than literal values — npm run lint enforces it wherever a token holds the value.