Foundations

Motion

Motion shows movement through the network or a change of state. Nothing moves for decoration or loops, and reduced motion turns it off.

Tokens

Token	Value	Use
`--duration-fast`	120ms	Hover and press color changes
`--duration-base`	200ms	Dialogs, popovers, menus, accordion, station state changes
`--duration-slow`	320ms	Toasts
`ease-out`	cubic-bezier(0.22, 1, 0.36, 1)	Entering and responding (default)
`ease-in`	cubic-bezier(0.55, 0, 1, 0.45)	Leaving
`ease-in-out`	cubic-bezier(0.65, 0, 0.35, 1)	Moving on screen
`animate-enter`	fade + 8px rise, 200ms	Floating layers opening
`animate-spin`	800ms rotation	Spinners while loading

What moves

Color change on hover and press120ms, ease-out. The primary button also presses down 1px.

Preview

Show code

<Button variant="primary">Register</Button>

Floating layers enterDialogs, popovers and menus fade and rise 8px over 200ms. Closing is instant.

Preview

Floating panel: opens in 200ms, closes instantly.

Show code

<div className="animate-enter">…</div>

Station state changesA station fills over 200ms when its section is reached.

Preview

passed

Show code

<Station state="here" />

Routes below the fold draw as you scrollroute-draw is scroll-linked and CSS-only (animation-timeline: view()). Where unsupported, or under reduced motion, the route is simply drawn. Never on a route above the fold.

Preview

Form
Test
Interview
Results

Show code

<RouteStop draw>…</RouteStop>   // or <Route draw />

What never moves

Text: no typewriter effects, word-by-word reveals or rotating words.
Numbers: no count-up stats, no ticking countdowns. “In 12 days” updates per day.
No split-flap boards, moving trains or animated dashes along routes.
No infinite or ambient animation: no pulse on “you are here”, no shimmer skeletons, no bounce. A station halo is static.
No parallax, scroll-jacking, auto-advancing carousels or hover scaling.

Don’t

A pulsing “you are here”, count-up stats, split-flap boards, hover scaling, auto carousels.

Routes that draw as you scroll below the fold, a static halo, 120ms color transitions, and nothing at all under reduced motion.

Reduced motion

Under prefers-reduced-motion: reduce, a global rule cuts every animation and transition to 1ms. route-draw never runs, so routes are simply drawn. Spinners stop and the loading label (“Sending…”) carries the state. Station state changes happen instantly.