foundations

Motion

Three durations under 160ms, linear or stepped. Named clocks for lamps, cursors, and spinners. Nothing eases.

durations

60 / 100 / 160 ms

Three durations, linear or stepped. Nothing eases, nothing bounces, nothing fades in on scroll. Run the specimens to see the ceiling — 160ms is the longest transition the system permits.

specimen

--dur-1

— · state change

--dur-2

— · reveal

--dur-3

— · panel slide

periodic behavior

1000 / 1060 / 480 ms

Three durations govern transitions. Repeating behaviors use named clocks so a panel of them reads as one instrument rather than several. An annunciator, a cursor, a spinner, and a live asterisk share this set — they do not invent their own periods.

--dur-tick1000 ms · annunciator lamp

nominal

A long lit phase briefly interrupted — a lamp under load, not a dot that flashes. One second is how long a person needs to register it.

--blink-period1060 ms · cursor

run█

A square wave, borrowed from the terminal. The one place a hard on/off is correct.

--dur-lamp500 ms · held warning

hold

A lamp that is on but not live — no animation at all. Stillness is a state.

steps(4)480 ms · spinner

Four discrete positions, never a smooth rotation. A mechanism advances; it does not glide. | / - \.

mechanisms

busy · wait · live

Loading is a character that steps, never a circle or a shimmer. Busy is work in progress. Wait is still here, no work running. The asterisk is a telemetry flag — the number stays readable; the star blinks. It is not --tex-stars and not the required-field mark.

spin

| / - \ on --dur-spin. The busy mark, including on a button.

wait

. .. ... on --dur-tick. Waiting, not working. Holds as ... under reduced motion.

star

1,204

Square-wave asterisk on --dur-tick. Prefer this over .tz-tick when the digits must stay still.

busy button

Spinner, not a hatch. The label stays so motion is not the only carrier.

live instruments

Live regions use the same clocks as the lamps. Tick pulses a readout. Marquee marches a fill lattice one cell at a time. Prefer .tz-star when the digits must stay still.

tick

1,204

One step per second. The number stays; the pulse says it is live.

marquee

Four steps. Pair with a --tex-* fill; default is --tex-25.

stepped run

Four cells on --dur-spin. A mechanism advances; it does not slide.

cursor

run█

1060ms square wave. Off the one-second clock so it does not strobe with the lamps.

reduced motion

Motion carries information here, so it can never be the only carrier. Under prefers-reduced-motion every transition is dropped and the live lamp holds lit rather than going dark or disappearing — the reading survives the animation being removed. A design that fails this test is using motion as the signal rather than as reinforcement.

as authored

nominal

Blinks on a 1000ms step. Star, wait, and spin stop the same way.

reduced

nominal

Lamp holds lit. Star holds *. Wait holds .... The word was always the name.