Motion

Motion speed

One knob, three paces. Everything below ships at a buttery default we call Smooth — but some reps want it out of the way, and some want it unhurried. So the whole motion layer is a single front-end preference: Fast, Smooth, or Calm. It’s remembered, and it carries across the tool.

The three scales

Pick duration by how BIG the move is. Anchored on the approved 280ms card-hover decelerate. Fast and Calm paces rescale every duration; easing stays constant.

Easing is identical across all three paces — the seven curves never move. Only time scales, so the buttery character is preserved end to end. Smooth is the bare default in the generated stylesheet — it adds nothing, so it can never drift from the spec.

Easing — by job

Pick easing by what the element is DOING. The curve says what kind of move it is: out for entering, in for leaving, in-out for moving between two on-screen states. All curves decelerate for the buttery glide, none are linear, and none change with pace. Click a runner to feel its curve.

out fast then settles — entrances · in eases up then accelerates away — exits · in-out symmetric — things repositioning on screen · standard the workhorse · settle a 1.4 overshoot reserved only for a successful confirm/commit, never for routine data · glide the signature long expo decelerate — press release & state-morph commits · smooth even and symmetric — colour crossfades that reveal gradually. The runners ride --dur-curve, a doc-only token long enough to FEEL each curve.

Duration — by size

Pick duration by how BIG the move is — anchored on the approved 280ms card-hover decelerate. Feedback is near-instant; bigger surfaces get more time. Click a row to watch its speed, change the pace above, and replay: every runner reads the same tokens, so they visibly rescale.

560ms is the ceiling, not a default. Three tokenised exceptions sit above it — --dur-tag (700ms, the slow even colour reveal), --dur-scroll-max (1100ms, long in-page scroll hauls) and --dur-roll (1800ms, the value roll’s dramatic settle) — each a deliberate long reveal of a change in place, never a layout move. --dur-curve exists only for this page’s easing player. Live values above are read with readDurationMs and update the moment the pace changes.

Behaviours

The registry of every shippable motion recipe. Recipes only ever combine the tokens above — easing by job, duration by size. Where a behaviour is interactive, the real thing is embedded: click to play.

What we don’t animate

Knowing what to leave still is what keeps the tool calm. These are good patterns in a consumer app and wrong here — included so the restraint is a decision, not an omission.

Reduced motion

Non-negotiable, and one media query. It ships in the component layer scoped to every product surface — animations collapse to an instant cut and nothing repositions, while the end state stays identical.

@media (prefers-reduced-motion: reduce) {
  .km *, .km *::before, .km *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Fast is not “reduced motion”

An easy thing to conflate, and worth keeping straight — they answer different questions and both stay honored.

Order of precedence: reduced-motion (accessibility) → then the chosen pace. A Fast user with reduced-motion on still gets instant cuts; the pace only governs how the system moves when it is allowed to move at all.