Motion samples

Chi's idea, in his words: one circle going out to many circles, filling the space. The single risk leaves and reaches the whole market. Simple to look at; the count and the reach do the talking.

The lines stay thin and fade as the circles land, so the end state is calm rather than busy.

The exact opposite, deliberately. Same circles, same geometry, run the other way: many circles collapsing into one. Side by side with panel 1, the two halves of the business read without a word of copy.

This is the same code as panel 1 with time reversed — that is the point. If you put them next to each other on the page, the mirror is the story.

Chi pointed at your drawing of circles moving left to right. Here that motion is tied to the scroll bar: scroll the page and the risk travels. Each circle fills in as it passes the middle — the moment it gets placed.

Turn on "Link to scroll" and then scroll the page — the slider follows your scroll position instead of playing on its own. That is how it would behave on the real site.

Your note that it should not be a sheet of paper you are looking at. A quiet field that breathes on its own and pulls away from the cursor. It sits behind headline copy and never competes with it.

Shown on the dark surface because that is where it earns its keep. On the cream background the same field would be about a third of this contrast.

A stand-in for the 3D direction. The tool Chi named on the call did not come through the transcript cleanly — it sounded like "Astra" and I could not confirm what it is, so I did not build on a guess. This is plain browser drawing: points on a sphere, turned and shaded by distance. It shows the feel of depth so you can react to it, and it swaps out the moment Chi tells us the real name.

One question for Chi: what was the 3D tool you mentioned? One name is all we need.

The value Chi asked you to help crystallise. Work flows through on its own, then stops at one person, who releases it — and it changes colour on the way out. The pause is the message: the machine does the volume, a human signs the risk.

Deliberately the slowest thing on the page. Everything else moves quickly; this one waits, and the wait is what you notice.

Three dots, then a line that doesn't stop. This is the one in the brand system — .elr in every v2 route — not a decorative ellipse. Same geometry every time: three dots eight apart, staggered so it reads as a sequence and not a flash, then the rule takes over and runs off the edge. The ellipsis is the request as it arrives: finite, punctuated, closed. The line is what we do with it.

Timing is lifted straight from brand.css: dots at .10s / .28s / .46s, line over 1.15s on cubic-bezier(.2,.7,.2,1). Once per page, never as a divider — the moment it becomes furniture it stops meaning anything.

Route 02 turns the motif on its side and stretches it — the dots pull apart, the line keeps going down past the fold. Useful as the left edge of a page rather than a mark inside one.

Same stagger and same 1.15s draw as 07 — one motif, two orientations, so a page using both still reads as one system.

Ambient background, light. Soft ellipses drifting at different speeds behind live copy. Nothing snaps, nothing demands attention; the page just stops being flat.

Copy sits on top at full contrast — the field never rises above about 12% opacity, which is what keeps text readable.

Ambient background, dark. Slow purple plumes, the quietest thing here. One full cycle takes half a minute, so on a real page you would never catch it moving — you would only notice that it is not still.

For a dark section — the closing band, or a full-bleed break between two light sections.

Ambient background, paper. Ruled lines that swell in a wave down the page, with a marker running the active line. The most restrained option, and the closest to the stick-diagram feel Chi kept coming back to.

Cheapest thing on the page to run — straight lines only, no gradients, no blur. Safe on an old phone.