Design system · 11

One entrance. Three loops.

Motion here supports the paper; it is never the point of a page. Content arrives one way, a short list of things repeat, and everything is complete with all of it switched off.

The entrance

Content resolves out of the paper: a short blur-fade over a few pixels of travel. Every section on the site uses the same one, on the same timings, so a page has a single cadence instead of each block inventing its own.

Heading

Arrives 0ms after the first.

Body

Arrives 70ms after the first.

Detail

Arrives 140ms after the first.

Three neighbours, staggered by one step. The stagger is capped at seven steps, so a long list never leaves the reader waiting on its tail.

Implementation

Entrance timings
Constant	Value	Meaning
	550ms	How long one element takes to resolve
	10px	How far it travels. Small: focus pulling, not sliding
	8px	Where it starts from
	-64px	How far into view before it begins
	70ms	Between neighbours in a group
	120ms	Between a heading and the text under it
	600ms	The pencil stroke, left to right
	350ms	After the line it marks has settled

<BlurFade>…</BlurFade>                          <!-- waits for the viewport -->
<BlurFade triggerOnView={false}>…</BlurFade>    <!-- a hero, above the fold -->
<BlurFade delay={stagger(index)}>…</BlurFade>   <!-- one of a group -->

The underline

The pencil stroke is the one thing in a hero that moves separately from the heading. The words arrive together; then the pencil goes under them.

Built once, properly.

Travel

Things that move physically share one curve: quick away, long to settle. A key travels in 110ms. A sheet crosses its own full width in 420ms at full opacity, and leaves in 240ms — a board sliding over the page, not an image of one fading up.

Curve: cubic-bezier(0.22, 1, 0.36, 1)
Key: 110ms
Sheet in: 420ms
Sheet out: 240ms, accelerating
Book turn: 300ms

Loops

Looping is a separate thing from an entrance, and it is rationed. Three things on the site repeat, each because repeating is what it describes:

01 The client marquee A list with no first or last.
02 Beams into the hub Discovery does not stop.
03 The cadence sweep A monthly cycle repeats.

Nothing else repeats. A fourth loop needs the same kind of reason.

Reduced motion

When a reader asks for less motion they get none of the above, in CSS and in JavaScript alike. Entrances and underlines render as finished markup before any timing is read. Loops stop rather than run faster.

Your system is asking for full motion

Rules

Use the one entrance, on the shared timings.
Wait for the viewport before starting anything below the fold.
Make a diagram read complete before animating it.
Stop loops outright under reduced motion.

Don’t

Slide, bounce or scale content into place.
Set a duration or delay at the point of use.
Stagger the parts of a hero; it arrives as one block.
Animate something that has to stay pinned while the page scrolls.