Hold T

While T is held, the text, the bar and the footer step back and the ribbons draw without the mask that sinks them under the reading, without the work's pictures and without the headline cut out of them. While it is held the pointer turns the sculpture, a few degrees each way, so it can be looked round. Let go and the page comes back at the same pace. A window that loses focus with the key down lets go too.

// the reading mask, eased out while T is held
const want = alone.on ? 1 : 0;
aloneEase.current += (want - aloneEase.current) * 0.12;
uniforms.uReadFade.value = fade * (1 - aloneEase.current);

Hold S

While S is held the page goes back to its wireframe. Every line of type becomes a bar the length of the line, in its own color a step down; every picture, video and live concept becomes a crossed box with its size in pixels; each heading and deck gets its type in the margin, the role and the size over the leading, read from the page's own computed styles. The canvas draws the ribbons as the mesh they are built from and puts the work's pictures away. The bars are a line-through, not a new font, so nothing changes size and nothing on the page moves.

The page does not flip: one lit line crosses the screen and the wireframe is drawn behind it, a view transition of its own type over the page as it was. Let go and the line crosses again with the finished page behind it. With reduced motion it simply changes. On a phone, press and hold “Hold for the wireframe” in the footer.

These are nearly the rules the sketches in the studies are drawn by, described in “A sketch drawn from the finished page”, applied to the page you are on while it runs. The one difference is display type, which is a bar here and an outline there.

/* a line of type becomes a bar the length of the line */
html[data-sketch] :is(.page, .site-nav, .site-footer) * {
  -webkit-text-fill-color: transparent;
  text-decoration-line: line-through;
  text-decoration-thickness: clamp(2px, 0.34em, 15px);
  text-decoration-color:
    color-mix(in srgb, currentColor 34%, var(--color-ink));
}

Press P

P keeps the frame: the canvas is drawn once more without the mask and without the pictures, laid on the page's own ground at the screen's own resolution, and saved as a picture with one line of type for the page, how far down it was and when. It is downloaded to your machine and sent nowhere.

J, K and G

J and K step to the next and the previous chapter. Every chapter opens on a hairline, so a step lands on the line the thread lies down on. G draws the construction grid over the page, the twelve columns everything is set on. None of the keys listen while you are typing, or when a modifier is held.

Cmd K, and the rail

Cmd K, or Ctrl K, opens one field that finds every page, study and note and everything the keys do, and from three letters the words inside the notes as well: choose a result and the note opens on that paragraph, lit. On a phone the same field is in the menu.

On a wide screen the rail down the right margin of the home page and of each study is a grip as well as a list: drag along it and the page follows the pointer between the marks, so the whole thread runs under the hand, every pose in order.

Kept in the tab

The record lives in session storage: one list per tab, gone when the tab closes, never in a cookie and never on our server. A page adds a stop when it opens and adds its visible time every few seconds, so a tab left in the background does not count as reading.

// on every page: a stop, and the time it is actually on screen
const t = readTrail();
if (t[t.length - 1]?.path !== pathname)
  t.push({ path: pathname, title: "", ms: 0 });
writeTrail(t); // sessionStorage, this tab only
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") { flush(); since = 0; }
  else since = performance.now();
});

Sent only when asked

Under the form there is a box that sends the list with your note, so the person who replies knows whether you read about the boats or only the home page. It is off until you tick it, and the privacy notice says the same.

Its length

The figure beside the label is the scrolling, up and down, at 96 CSS pixels to the inch. Jumps are left out: an anchor link, or a new page starting at its top, moves the page without anyone pulling the thread.

On the page that does not exist, the same thread is drawn with every stop a link, so the way back from a dead end is the way you came.

Only the base color

The material is locked down the page on purpose: an earlier version let each section swing the lighting, and the same object read as graphite in one place and white vinyl in another. So nothing about the metal changes here, not the roughness, not the reflections. Only its base color leans towards the study's, at most half way, and only while that study is at the middle of the screen.

Because the ribbon is mostly metal, the base color tints what it reflects rather than painting over it. On black the result reads as light from the work falling on the object, not as a colored ribbon.

// once a frame, while the work is on screen
rows.forEach((r, i) => {
  const d =
    Math.abs(r.top + r.height / 2 - h / 2) / (r.height / 2 + h / 2);
  const weight = 1 - Math.min(1, d);
  if (weight > amt) { amt = weight; idx = i; }
});
tint.lerp(STUDY_TINTS[idx], 0.08);
mix += (Math.min(1, amt * 1.4) * 0.5 - mix) * 0.06;
material.color.copy(BASE).lerp(tint, mix);

And the other way

A fast scroll pulls the thread taut: the slow breath that runs along it flattens at once and comes back over a second or so once the page stops. It is the smallest possible answer to the hand that moves the page, and it never moves the object off the line it is laid on.

A thread, not a rod

The first version laid a straight bar over the rule, and people read it as a stick on its way down. The pose it lies in now runs a little past both ends of the rule, tapers to a point at each, and keeps a slack of a few pixels along its length, the way a thread lies on a table.

// the pose on a rule, seven points along its width
const over = Math.min(90, width * 0.08);
const pts = [0, 1, 2, 3, 4, 5, 6].map((i) => [
  x0 - over + ((width + 2 * over) * i) / 6,
  wy + (i === 0 || i === 6 ? 0 : 3.5 * Math.sin(i * 1.7 + 0.5)),
  0,
]);

The line steps aside

While the thread lies on a rule, the rule's own element fades out in 200 ms and comes back over most of a second when the thread leaves, so the page never shows two lines where there is one. On every page but the home page and the contact page, the last hand-over is onto the footer's rule, timed to the end of the scroll, and the thread stays there.

Nothing here is animated on a clock. Every pose is a function of the scroll position, so scrolling back up plays the whole thing backwards, which is what the link above the footer does.

Where the object does not come down onto the rules, on the paper of the case studies and on a phone, the rule itself carries the thread: it is drawn over from the left as the reading reaches it, and a bead settles where it ends. On a phone the same line runs into the submit button at the end of the form.

Forgetting the paint

A script opens the concept page in a headless browser, reads every element's computed style first, and then redraws it. Display type keeps its size and position and loses its fill, so a headline becomes its outline. Reading text turns into a gray bar the length of each line. Anything painted and large enough becomes a crossed box, the old sign for a picture that has not been made yet, and a thick drawn arc comes down to a pencil line. The construction grid stays.

Last, a displacement filter with a little noise makes every line wobble by about a pixel. Without it the result looked like a print of the page, not like a drawing of it.

Why the same page

Because the layout is the part that was decided in week one. Drawing a new sketch after the fact would have been a picture of a process; taking it from the finished page shows that the columns, the rows and the headline's place were there from the start, and that what changed was everything laid on top of them.

A map of the reading

Whenever the layout changes, every text node on the page is measured, line by line, with the same boxes the browser uses to draw it. Lines that sit above one another in one column are merged into a single box, because a stack of rectangles of different widths prints itself into the ribbon as a staircase. The boxes are drawn as one white shape into a small canvas and blurred once, by hand, so that where two boxes meet there is a slope and not a step. That canvas is the mask the shader reads.

Each box is grown by most of the blur radius before it is softened. Without that, a short label is smaller than the blur, the mask never reaches full strength inside it, and the ribbon stays bright exactly where a 12 px line needs it not to be.

Display type is taken at a fraction of the strength: a ribbon behind a large headline is part of the composition, a ribbon behind body copy is not.

Sinking, not hiding

Each pixel of the ribbon reads the mask at its own place on the screen. The mask keeps the viewport's proportions, so the falloff is the same in both directions at any window shape. Where there is reading, the pixel is mixed towards the page's own background color.

How much is decided by the pixel's own brightness. A lit crest under a label sinks almost completely; a face in shadow keeps its shape. A flat fade would have to be strong enough for the brightest crest, and at that strength it flattens every dark part of the object into a gray rectangle. This way the ribbon passes behind the text and stays an object.

// ribbon fragment shader, after tone mapping
float read = texture2D(uRead, gl_FragCoord.xy / uResolution).r;
float rbLum = dot(gl_FragColor.rgb, vec3(0.2126, 0.7152, 0.0722));
float rbFade = clamp(uReadFade * (0.5 + 1.6 * rbLum), 0.0, 1.0);
gl_FragColor.rgb = mix(gl_FragColor.rgb, uGround, read * rbFade);

Measured, not eyeballed

A script loads each section, takes the canvas once with the ribbon and once without, and counts the ribbon pixels that land inside each text box. The bar is under half a percent of a block's area, and above three percent of the frame outside the text, so the object never simply disappears to pass the test.

The one exception is the home page headline. Its glyphs are drawn into the stencil buffer, so one ribbon passes in front of the letters and two behind them, and only while the first screen is at rest. Once the page moves, all three pass behind.

The gate

A production build is served locally and measured with Lighthouse on mobile and desktop, then in a phone lab: a 390 px profile with the processor slowed four times and a Fast 3G network. The same run checks accessibility with axe, and loads the site again with reduced motion and with WebGL switched off, because both have to work on their own.

The thresholds: Lighthouse performance at 90 or above on a phone, the largest paint under 2.5 seconds, interaction to next paint under 200 ms, layout shift under 0.1, and the home page under 1.8 MB on a phone. A release that misses one does not ship.

// what the home page reads, from the last gate run
"thresholds": {
  "lighthousePerformanceMobile": 90,
  "lcpMs": 2500,
  "inpMs": 200,
  "cls": 0.1,
  "fpsMin": 55
}

What it takes

The headline is plain text in the document and it is the largest paint, so nothing may load before it. The canvas is created after the load event, in an idle moment, and only on pages that have something to draw. There is one canvas for the whole site and one material for the ribbon.

The renderer watches itself. Quality comes in three tiers, from 360 segments along each ribbon down to 100, and two seconds under 50 frames a second drops the pixel density once. Pages that are for reading let the canvas render on demand, so it costs nothing while nothing moves.

Published

The release gate writes its results to one file, and the home page reads its four numbers and their budgets from that file. The full run, with every page and every check, is on the QA report page.