Foundations
Motion
Motion is infrequent and purposeful, not ambient. A small set of named easing curves, each reused consistently for the same kind of motion across unrelated components.
Named easing curves
Five curves account for nearly every transition
Press play to watch the dot move using the real cubic-bezier value, graphed on the left.
Duration scale
From micro-feedback to brand sequences
666ms recurs exactly enough times across the about-page to read as a deliberate token, not a coincidence.
Signature affordance
The rolling chevron
Hover any of these. The same animation — translateX(-100%) → 0 → 125%, 2s infinite, Ease Glide — appears near-identically on nav links, the type tester, and deep-dive cards. Three unrelated components, one shared signature.
Reveal pattern
Uncover, don't fade
Brand storytelling sections enter via a clip-path wipe rather than opacity alone — a deliberate 'uncovering' feeling.
Usage
Do / Don't
Do
- Match the easing curve to the kind of motion, per the curves above — don't pick one for how it 'feels' in isolation.
- Use the rolling-chevron pattern verbatim (timing, transform values) for a new hover-to-reveal affordance.
- Prefer a clip-path wipe over an opacity fade for brand storytelling section entrances.
Don’t
- Add ambient or looping motion to UI chrome beyond the established loops (rolling chevron, progress-bar fill, gradient rotation).
- Ship new about-page motion without a prefers-reduced-motion override — see Accessibility.
- Invent a sixth easing curve for a one-off moment when one of the five already fits.