Motion

Motion confirms cause and effect — fast, purposeful and always interruptible. Nothing in the system animates for decoration.

Durations

Three steps cover the system. Hover each tile to feel the difference.

Fast · 150ms

Colour, opacity and shadow feedback — button hovers, focus rings

Base · 200ms

Structural movement — accordion expand, menu open, toast enter

Slow · 300ms

Large surfaces — sheets, dialogs, page-level panels

Step	Duration	Utility	Use
Fast	150ms	`duration-150`	Colour, opacity and shadow feedback — button hovers, focus rings
Base	200ms	`duration-200`	Structural movement — accordion expand, menu open, toast enter
Slow	300ms	`duration-300`	Large surfaces — sheets, dialogs, page-level panels

Easing

Ease-out for things entering or responding (start fast, settle gently); ease-in-out for things moving on screen. Never linear for UI.

Easing	Use
`ease-out`	Default — menus, accordions, toasts, hover feedback.
`ease-in-out`	Repositioning — sheets sliding, elements trading places.

In practice

Components ship with their motion built in — accordion and enter/exit animations come from the token layer and tw-animate-css.

/* Feedback: colour only, fast */
<Button className="transition-colors duration-150" />

/* Structure: the accordion's 200ms ease-out lives in tokens.css */
--animate-accordion-down: accordion-down 0.2s ease-out;

/* Overlays animate with tw-animate-css enter/exit utilities */
data-[state=open]:animate-in data-[state=closed]:animate-out

Brand motion

A second tier above functional motion: signature moments where the brand mark itself animates — the triangle "peak" drawing itself. Reserved for loading, empty states, splash and success beats.

Spinner (md/lg) — the peak draws itself

Restraint rules:

One signature moment per view — never in dense UI (menus, tables, toasts).
Functional motion stays on the neutral 150–300ms system.
prefers-reduced-motion collapses it to the static mark.

Rules of thumb

Animate transform and opacity; avoid animating layout properties.
Everything under 400ms — users are here to finish tasks, not watch transitions.
Respect prefers-reduced-motion: movement collapses to a fade or nothing.