Lab / Specimen 01
A door cut through
the counter of a letter.
The word is not ink. It is a hole in a sheet, and what shows through it is the next section of the page. Scrolling pushes a camera into that hole until one stroke is wider than the screen, at which point the sheet is gone and you are simply through.
Scroll on. It takes about three screens.
Scroll through.SKIP THE DIVE ↘
Everything past this point was built, shipped, and is still running.
How it is built
An SVG clipPath holds the word; a plain div holds the field behind it. Clipping the div by the path is what makes the letters windows rather than glyphs, and scaling the path is the camera moving. Past the point where one stroke covers the viewport the clip comes off entirely — cheaper to paint, and the moment the section stops being a word.
The hard part is knowing where to aim. A component that can do this to any word has to rasterise each glyph and scan it, because the middle of a letter is as likely to be a counter as a stroke — aim at the hole and the screen goes black. With one word in one face the target is a constant, so it was measured once: WORK rendered in Playfair Display at 900, every point on a grid tested for the largest disk of solid ink that fits around it. The bowl of the O wins.
The pin is sticky and the section is as tall as the dive is long, so the scrollbar keeps telling the truth about the length of the page. Nothing here intercepts a wheel event or animates the scroll position, which is why it still behaves under a trackpad flick.