Animation
Calm by default, alive on signal. The identity breathes; the loader beats.
Calm by default, alive on signal — and timing is tokens, not folklore:
| Token | Value | Use |
|---|---|---|
--duration-quick | 150ms | interaction feedback — hover, press, focus |
--duration-gentle | 250ms | surface changes — theme ease, reveals, progress |
--ease-lumen | cubic-bezier(0.22, 1, 0.36, 1) | the house curve — a smooth liquid out-ease (flow through a lumen, not mechanical snap) |
--ease-flow | cubic-bezier(0.65, 0, 0.35, 1) | for light travelling (sweep, beam) — the out-ease alone would make it brake at the exit |
In Tailwind: duration-(--duration-quick) ease-(--ease-lumen) (or the ease-lumen / ease-flow
utilities). Every package component already references them.
Waiting has its own three — --wait-delay (180ms), --wait-min (420ms), --wait-long (6s). They're
the timing contract behind every loading state, mirrored in TypeScript as WAIT:
Content → Loading. And everything that loops shares one tempo —
--vital-tempo (1.25s, a resting pulse): every motion duration in the system is a stated multiple of
it. Content → Vital.
The three organs
The motion language has exactly three primitives, each owning its anatomy:
The eye — the five-dot identity primitive, the same five that form the brand mark.
It breathes (lumen-breathe), blinks, and disperses into a particle cloud; its poses cycle
Body (Vitruvian) → Hand → Pulse → Constellation. The identity and a data-viz element — never the loader.
The lumen — waiting and process: light and cells through the body's channels. One channel at four views (sweep, beam, orbit, and the inhabited loader with its six interior rhythms), all on the one tempo. This is the whole loading system.
The body — the kinematic figure from the movement zoo: gaits, exercises, held poses. Activity and celebration belong to a body with legs — not to cells, not to the mark.
prefers-reduced-motion
Every animation honors prefers-reduced-motion. Under reduced-motion the dots settle to their resting pose,
the loader to a resting row, and looping stops — motion is earned by a signal, never ambient.
→ Dancing dots — the logo lab · Particle cloud — Living Lens · Loader zoo — bodily rhythms · Orb zoo — one sphere