Skip to main content
Context GrammarDesign for context-aware AI

Design system catalogue

Page motion

Motion at the scale of a page: arriving, moving between pages and scrolling.

Arrival

01

First load

Trigger
Page load
Easing
--ease-out cubic-bezier(0.16, 1, 0.3, 1)
Reduced motion
Skipped entirely; the page simply appears.

Once per session: the grid lines draw down, the header hairline draws across and the page title lifts. Content is never hidden, so nothing waits to be read.

Navigation

02

Page transition

Trigger
Navigation
Reduced motion
Pages change instantly, with no transition.

The old page fades out, the new one rises a few pixels and the header hairline redraws, in under 400ms, while the navigation stays put. Replay changes only the address query, so it plays without leaving this page.

Scroll

03

Scroll drawing

Trigger
Scroll
Reduced motion
Diagrams are shown fully drawn and never move.

Hairline diagrams draw with scroll position and undraw when you scroll back. The reader's scroll is the clock, so there is no duration or curve.

04

Illustration reveal

Trigger
Scroll
Duration
--dur-stage 560ms
Easing
--ease-out cubic-bezier(0.16, 1, 0.3, 1)
Reduced motion
The illustration is shown whole from the start; there is no mask.

One illustration per page appears once, by a mask wipe from left to right when about a third of it is in view. It is rendered whole, so without JavaScript it is simply there.