Skip to content
Site volume
Colourway

Motion

Durations

Every duration token at every volume on one live timeline, the staggers that space a batch, and what reduced motion keeps.

  • Experimental
On this page

Every duration is a token with a value per volume, printed as --mk-dur-<name> and resolved by the volume of the element that reads it: a Press section on a Studio page plays its panels at Press's 360 ms without a line of script. Pick the volume on the stage and press Play: each bar fills over its own token, so it takes exactly as long as the moment does.

The timeline#

The reading layer

Keys, overlays, toasts, disclosures: the same at every volume (D-B2).

  • --mk-dur-hoverQuiet 200Studio 200Press 200Rave 200Hover and press, Cursor
  • --mk-dur-pressQuiet 220Studio 220Press 220Rave 220Hover and press
  • --mk-dur-key-sinkQuiet 120Studio 120Press 120Rave 120Hover and press
  • --mk-dur-menuQuiet 140Studio 140Press 140Rave 140Menus and the nav panel
  • --mk-dur-overlay-inQuiet 240Studio 240Press 240Rave 240Dialog
  • --mk-dur-overlay-outQuiet 160Studio 160Press 160Rave 160Dialog
  • --mk-dur-drawer-inQuiet 280Studio 280Press 280Rave 280Drawer
  • --mk-dur-drawer-outQuiet 200Studio 200Press 200Rave 200Drawer
  • --mk-dur-disclosureQuiet 180Studio 180Press 180Rave 180Disclosure, Menus and the nav panel
  • --mk-dur-gaugeQuiet 900Studio 900Press 900Rave 900Gauge
  • --mk-dur-toast-inQuiet 380Studio 380Press 380Rave 380Toast
  • --mk-dur-toast-outQuiet 260Studio 260Press 260Rave 260Toast

Fixed

Never scaled by the volume (a few, like the press run, are off at Quiet).

Micro moments

Stickers, stamps, SFX, blocks: off at Quiet, the same from Studio up.

  • --mk-dur-sticker-popQuiet NoneStudio 480Press 480Rave 480Sticker land
  • --mk-dur-sticker-pop-delayQuiet NoneStudio 200Press 200Rave 200Sticker land
  • --mk-dur-peelQuiet 240Studio 300Press 300Rave 300Sticker peel
  • --mk-dur-stampQuiet NoneStudio 460Press 460Rave 460Stamp
  • --mk-dur-thumpQuiet NoneStudio 220Press 220Rave 220Stamp
  • --mk-dur-specksQuiet NoneStudio 640Press 640Rave 640Stamp
  • --mk-dur-sealQuiet 240Studio 300Press 300Rave 300Stamp
  • --mk-dur-registerQuiet NoneStudio 520Press 520Rave 520Second-ink register
  • --mk-dur-sfx-popQuiet NoneStudio 700Press 700Rave 700SFX pop, KeyPop, Comic hit
  • --mk-dur-sfx-outQuiet NoneStudio 300Press 300Rave 300SFX pop, KeyPop, Comic hit
  • --mk-dur-block-hopQuiet NoneStudio 620Press 620Rave 620Block hop
  • --mk-dur-block-dropQuiet NoneStudio 700Press 700Rave 700Block drop
  • --mk-dur-block-drop-staggerQuiet NoneStudio 90Press 90Rave 90Block drop
  • --mk-dur-reinkQuiet 400Studio 700Press 700Rave 700Re-ink and theme
  • --mk-dur-topple-stepQuiet NoneStudio 120Press 120Rave 120404 topple
  • --mk-dur-topple-fallQuiet NoneStudio 420Press 420Rave 420404 topple

Long moments

Panels, arrivals and the wipe grow from Studio to Rave.

Every duration: controls

One scale, 0 to 1.2 s; a bar that runs past it is drawn broken. Each bar fills over its own token at the volume picked.

Four classes#

  • The reading layer moves the same at every volume (D-B2): a key sinks in 120 ms, a dialog opens in 240 ms, a toast drops in 380 ms, whatever the dial says.
  • Fixed durations never scale: the press run's 800 ms, the paper's 400 ms crossfade, the field's 4 s run.
  • Micro moments (stickers, stamps, SFX, blocks) are off at Quiet and the same from Studio up.
  • Long moments grow with the volume: panels go from 300 ms at Studio to 420 ms at Rave, and the page wipe only exists at Press and Rave.

Staggers#

A batch arrives one step apart: panels at their volume's step (40, 48 or 55 ms), at most eight to a batch, words 60 ms apart, tiles 70 ms, blocks dropping onto the pile 90 ms in seat order.

Panels, at most 8 a batch
Words, 60 ms
Tiles, 70 ms
Blocks dropping, in seat order
Staggers: controls

Each square starts one step after the one before it; the step is the token at the volume picked.

Reduced motion#

Under reduced motion every duration is 0 except the ones that are waits rather than moves: --mk-dur-toast-life (5.2 s), --mk-dur-seal-delay (1.2 s), --mk-dur-sfx-hold (600 ms), --mk-dur-theme (140 ms) and --mk-dur-reduced (140 ms, the fade everything else may use). Turn on the stage's Reduced motion switch and play the timeline to see the bars that stay.

In code#

.offer-banner {
  animation: arrive var(--mk-dur-panel) var(--mk-ease-out) backwards;
  animation-delay: calc(var(--mk-i, 0) * var(--mk-dur-panel-stagger));
}
import { dur } from "@maxgrits/overprint-tokens/motion";

dur("panel", "press"); // 360
dur("panel", "press", "reduce"); // 0