How it works
Five arrangements of the same four elements
A product page usually changes by navigating: you
leave, the DOM is torn down, a new document paints. What this page
demonstrates is the other half of the idea — that the change can be
choreography. The plate, the price, the specification row and
the index rail are four elements that exist in all five states. A
button changes one attribute on body; CSS rearranges the
grid; the script reads every element's rectangle before and after and
plays the difference.
That is the FLIP technique: First, Last, Invert, Play.
No framework, no layout library, no animation of properties that force
reflow — four getBoundingClientRect() calls and a
transform per element, with a per-element delay so the
composition moves as a sequence rather than as a block.
Technique
- Transition
- FLIP with per-element stagger, measured, on transform and opacity only
- Shared elements
- plate, price, spec row, index rail — four nodes, five states, zero mounting
- Artwork
- Canvas2D product render, redrawn per state: plinth, line-up, dial macro, full bleed, blueprint
- Palette
- House OKLCH tokens, cyan colourway, no colour named outside a token
- Network
- Zero requests. One file, system type stacks, no fonts, no images, no CDN
What it does
Five buttons, five states, and a fifth thing that is not a state at all: Autoplay walks the whole sequence so you can see the path rather than the destinations. The readout under the buttons prints the state name, the measured travel of the largest element in pixels, and the frame time of the render — all read from the running code at the moment you read them.
Live demo
Press the state buttons, or the number keys 1–5.
Space runs autoplay, H folds the dock away and
← / → step one state at a time. The
composition you are changing is on screen the entire time, at every
width from 320 px up.
What it is good for
Product launches where one object has to be argued five ways — hero, comparison, detail, immersive, index — without losing the reader's place. Also configurators, case-study covers, and any store where a customer crosses between a grid and a single object and should never feel the page reload under them.
Combines with
Chapter 03's GPU particle field behind the plate, a real product photo or render as the shared element, chapter 12's system switching for the colourways, and a scroll-linked timeline that drives the same five states without a button at all.
Complexity
The whole engine is under 200 lines: one attribute write, one
getBoundingClientRect pass, one transform
pass, one requestAnimationFrame to release. It costs
nothing until a state changes, and it never animates
width, height or top.
Performance
The canvas is redrawn on a loop that self-limits: if a frame runs long
the loop widens its own interval, and if the document is not visible it
stops entirely. The canvas is sized to the device pixel ratio, capped
at 2. With prefers-reduced-motion: reduce the loop does not
start: one settled frame is drawn, the FLIP is skipped, and the page
is complete and readable.