Foundations
Motion
Mechanical, short, and only when something changed. Reduced motion stops the movement and keeps every value.
Timings
- Key press and release
- 70 ms
- Switch thumb, selector key
- 180 ms slide · 70 ms press
- Panels and dialogs arriving
- 220 ms rise, 8 px, fade
- Ladder
- 90 ms, linear
- Progress
- 300 ms
- Lamp blink
- 1.2 s, stepped
One curve for all of it, --tui-ease: a quick start and a soft landing, like a key hitting its stop. No bounce, no elastic, no parallax, and no hover lifts on panels.
Feel it
Reduced motion
Under prefers-reduced-motion: reduce, the kit sets every transition and animation inside .tui to zero and stops lamps blinking. Keys still go down, switches still change, dialogs still appear. They just arrive without travelling. No information is carried by movement alone.
What it costs
Anything that moves on its own (a lamp breathing, an aurora drifting) pauses off screen and in a hidden tab. It never moves a blurred layer: a blur() redrawn every frame is the heaviest thing a page can ask of a phone. The softness goes into the gradient instead. Each one is checked with the graphics card switched off, where it still holds 60 frames a second on less than one core.
The full law
This page is a summary in plain words. The brain holds the law itself, written for an agent to follow.
The full law, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.