Motion

Rules

• One orchestrated moment per page. On the chat page it is the venue hero handing over to the compact header; a new page earns exactly one such moment, deliberately chosen.
• Everything else answers an action: a message rising in, a chip scaling under the finger, a focus ring settling. Nothing loops for decoration. The drifting sky is the single sanctioned exception, and it is imperceptible on purpose.
• The scale below is the only timing there is. Pick a step by what the motion does, never by the nearest number: a dialog closing is duration-quick whatever it was before. No ad-hoc ms, no hand-rolled cubic-bezier.
• Opening invites, closing gets out of the way: a surface opens on duration-fast and closes on duration-quick. Never delay a close, and never bounce one.
• Choices glide. Where every item can be chosen, they sit close and they stay put — a menu, a select, the sidebar, tabs, a calendar's days — one wash travels to the nearest item instead of each item blinking on and off: Glide from shared/glide. Not on tables, sparse cards, lists that move, or anything a wrong click would hurt.
• Animate on the compositor: transform and opacity, never a custom property, never a style read per frame. A blur is the one exception, and only on words (a headline's reveal): on chrome — the nav — it stuttered while the page loaded. The craft timer's ring is the other: one small SVG's stroke-dashoffset.
• Every animation stills under prefers-reduced-motion. This is part of the definition of done, not an enhancement.

The recipes come from transitions.dev by Jakub Antalik, installed in the repository as the transitions-dev and transitions-polish skills. Ask for transitions review to audit a component against the scale.

Durations

Tailwind's duration-* scale. A bare transition is duration-quick and ease-smooth-out.

Easings

Tailwind's ease-* scale. Smooth-out is the default; the others each carry their own intent. Played here on duration-very-slow.

Distance, scale and blur

Where a motion starts from; it always settles at rest. Read them as var(--…) in a transition or keyframes.

Which motion, where

The standard entrance

/* The texts reveal: animate-text-reveal (or .aura-rise on the aura) —
   a 12px blurred rise on duration-very-slow, smooth-out. */
<h1 className="motion-safe:animate-text-reveal">…</h1>
/* stagger a load sequence in steps of --duration-micro */
<p className="motion-safe:animate-text-reveal animate-delay-micro">…</p>

The landing's arrival

The landing's one orchestrated moment: the nav rises in piece by piece, then the headline sweeps in line by line, then the subhead, faster, then the way in — about 1.7s. The words and the way in run on one clock, held until the page runs, so nothing shows before the headline. Replay it here; the pieces are on BlurReveal.

/* The nav: each piece a --duration-micro step after the last. */
<li className="blur-in" style={{ "--blur-in-step": 2 }}>…</li>

/* The hero: the headline, then the subhead, then the way in. */
<h1><BlurReveal by="line" pace="duration-medium">{headline}</BlurReveal></h1>
<p>
  <BlurReveal by="line" pace="duration-quick" wait="calc(var(--duration-medium) * 2)">
    {subhead}
  </BlurReveal>
</p>
<RiseIn after="calc(var(--duration-medium) * 2 + var(--duration-quick) * 3)">
  <ButtonLink href="#early-access">{cta}</ButtonLink>
</RiseIn>

Waiting

• Waiting is shown by the thinking orb, not a spinner: Okami's dots bloomed into a slowly turning sphere of glass. Spinners are a last resort for the dashboard's true loading states.