The components
Three surfaces running on this page rather than pictures of them. Each one exists to protect an invariant, and the invariant is written underneath it.
The working model
A five-stage mechanism with two paths: what normally happens, and the one interesting way it fails. Press a stage to inspect it — playback pauses so you can read, and resumes when you leave. It is the same component used on all fourteen case pages.
Process instrument Concept Illustrative data
Component · instruments.js · stage step 2300ms ÷ speed · exception hold 4000ms
The invariant
Only one surface on a page may be moving. The instrument registers with a shared coordinator at priority 1; a product film registers at priority 2 and takes the floor when it is more than 60% visible. Deliberate pause always wins over both — if you pause something, nothing else is allowed to start it again.
Selecting a stage or moving keyboard focus into the stage list pauses playback. That is not a convenience, it is the whole reason the component exists: the mechanism has to be inspectable at rest, or it is just an animation.
Status, without colour
Four maturity labels appear across the fourteen investigations. Each carries its text, never colour alone — the difference between “Built foundation” and “Concept” is the most important thing on a case page, and it has to survive a greyscale print and a screen reader.
The invariant
Maturity is separate from demonstration fidelity, and both are stated. A finished film in front of a conceptual product is honest only if the label says so.
The frame
Every piece of work on this site sits inside a frame, and the site's own styling stops at its edge. The work keeps the type, colour and spacing it was designed with; the frame contributes a hairline, a label and a provenance line. It is the reason two design systems can share a page without arguing.
An empty frame
Work goes here, untouched.
Nothing inside a frame is restyled by this site — that is the rule
With reduced motion
What you would see
The instrument above shows every stage at once, with its artefacts open, instead of revealing them one at a time. Nothing is hidden and nothing is lost — the component simply stops using time as a way of explaining sequence, and uses the page instead.
Turn the preference on and reload if you want to check. That is a fair test to run on any site that claims to support it.