System

Motion, made visible

Five durations, four easings, two theatrical moments. Play them.

The physics

Five durations, four easings

One curve family (docs/MOTION.md). Pick a duration and an easing, then replay the sample move — the numbers below are the exact token values, not approximations.

Duration
Easing

motion.duration.base (240ms) · motion.easing.standard

The one theatrical moment

The reveal, replayed

The brand’s only entrance: the leaf-arc draws itself, the sun core ignites, the rays fan out staggered, the lens-flare twinkles once. ~1300ms total, played once per replay here — in production it plays once, ever, per visitor session.

~1300 ms total: leaf draws, sun ignites, rays fan out, flare twinkles. Respects reduced motion.

The instrument reading

Loading, looking

Constant angular velocity, no easing, no sun — an instrument reading, not a spinner. When loading resolves, the sun-lit mark (or the full mark) takes over: looking becomes seeing.

1200 ms period, linear, repeats indefinitely. Bare leaf — the sun never joins this loop (ADR-0011: sun absent + rotation = looking).

The contract

Reduced motion, respected live

prefers-reduced-motion: reduce is a contract, not a suggestion. All non-essential animation is disabled — including scroll choreography and the hero scene — replaced by a single 200ms opacity fade where an appearance must still be communicated. Layout is identical in both modes.

Your browser currently reports: no-preference

This reading updates only on page load; change the OS/browser setting and reload to see it change. Every motion demo on this page (and every animation on the site) already honors it.

Continue: Instruments