Named clocks
You never watch eight cursors. The team is one presence, and its motion is a language with six words — each on a clock that is named, owned, and stops when meaning does.
The legacy living specimen — all six states, switchable — is on the Orb component page. It is for brand moments, not routine work status. Under motion · reduced it holds still and the same states are carried by the beat label alone. Each clock is a token (--orb-breathe … --orb-done), so a beat can never be re-timed in one component only.
Interaction speeds — the other four
The six clocks belong to the orb. Everything else — hovers, disclosures, row transitions, an overlay arriving — moves on one of four named durations paired with named curves. The rule inside the sheet is short: hovers are fast, weight is slow. If a transition needs a fifth duration, it is usually asking for a different interaction.
| Token | Value | For |
|---|---|---|
--dur-instant | 90ms | state that should feel like it already happened |
--dur-fast | 120ms | hover, focus, the row-title tint |
--dur-base | 180ms | disclosure, the collapse curve's partner |
--dur-slow | 260ms | an overlay taking the screen |
--motion-collapse | 180ms · cubic-bezier(.4,0,.2,1) | a section folding |
--motion-revert | 220ms · cubic-bezier(.4,0,.6,1) | an undo walking a change backwards |