K06 MOTION TAKT = 600 ms

Move. Dwell. Move.

Everything moves on one beat. Elements index into place in discrete steps, counters tick like production counters, nothing floats.

Pauses all looping demos on this page (WCAG 2.2.2). Reduced motion: OFF

Durations & easings

Servo
--ease-servo
cubic-bezier(.7,0,.2,1.12)
Index
--ease-index
cubic-bezier(.4,0,.6,1)
Press
--ease-press
cubic-bezier(.3,1.6,.5,1)
90
--t-90 · micro, hover
180
--t-180 · state change
300
--t-300 · slat, panel
600
--takt · index step
1200
--t-1200 · chapter

Scroll-trigger catalog

ST 020 · LIVE DEMOS
M.01 · CARRIER INDEXINGservo · 600
ST 010
ST 020
ST 030
ST 040
ST 050

The carrier jumps to the active station, never slides continuously. Progress fill may be continuous.

M.02 · PRODUCTION COUNTERindex · 90 per digit
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

Digits roll one position per beat, like a mechanical counter. Illustrative count.

M.03 · HALL DOOR
Chapter 02
Five axes

Slats collapse bottom-up at 60–90 ms offsets. Reduced motion: cross-fade.

M.04 · QUANTIZED STAGGER
01
02
03
04
05
06
07
08

Stagger in 90 ms steps, so eight items land within the 600 ms beat plus one step.

M.05 · STATE TIMELINE FILL

Segments fill left to right in shift order. Animates once on scroll-in.

M.06 · PRESSpress · 180
BASKET 02

Tactile compress on press, badge stamps on confirm. Also used for toasts.

Motion budget

ST 030 · BY INTENT
Marketing · Expressive

Hall Door, carrier, counters, exploded scrubs. D01, D02, D06, D09, D12.

Utility · Calm

180 ms state changes only. Finder, configurator, RFQ, service.

Portal · Functional

No decorative motion. Data updates without animation. D11.

  1. R.1Native scrolling only. No scroll-jacking, no smooth-scroll hijack.
  2. R.2Animate transform and opacity only.
  3. R.3prefers-reduced-motion: all transitions 0 ms, doors open, counters show final values.
  4. R.4Anything running longer than 5 s gets a visible pause control.