← Back to the build log
Chapter 03 · April 2026

Four tiles from
the same sheet.

CSS couldn’t do fibre. A 60×60 photograph could — if we killed the repetition.

The idea.

The grid is already dividing the surface into regular cells. So the seam of a tiled image becomes invisible if it lives on a grid line. Ink covers seam.

A 60×60 pixel tile of plain fibre: ~8 kB. One major grid cell per tile. Unique bias — a slightly brighter corner, a subtle drift — walks across the page as a diagonal when you repeat it.

00
The first candidate — rejected
The first stock tile we tried. Three tells: near-white (too light for our palette), baked-in printed grid at a non-matching scale (fought our CSS grid), and a corner vignette that tiled into a visible lattice.
✗ first try · rejected

The tile had character on its own. Tiled, its baked grid, vignette and over-bright tone all fought the rest of the page. We went hunting for warmer, plainer stock.

01
Better candidate, new problem
Cream stock, fibre character, a faint printed teal grid that sits under ours without fighting. But: repeat it and a subtle diagonal bias walks across the block.
a · bare tile
02
Path A — tile with our CSS grid on top
Grid softens the tile’s bias a little (ink covers seam). Still not enough on long scrolls.
b · tile + grid
03
Breaking the bias — flip experiments
The diagonal comes from one tile carrying a directional bias. Flipping adjacent cells cancels bias locally. Mirror flips preserve seamlessness; pure rotation doesn’t.
control
2×2 flip macro
4×4 flip macro

Better than control. But flipped tiles reverse fibre direction — the paper starts to read as zigzag weave, not fibre.

04
The fix — four tiles, same sheet
Four unique crops of the same scan, shuffled pseudo-randomly into a 4×4 macro. No flips. No rotations. Fibre direction consistent. Eye runs out of matches before it finds a pattern.
a · single tile
b · 2×2 family
c · 4×4 family ★ shipping
05
The honest test
1200px of the shipping surface. The height at which tile-based backgrounds usually betray themselves. Scroll past and judge.
06
The dark variant — the keeper
Applying filter: invert(1) hue-rotate(180deg) to the same paper produces the dark-mode surface. Same asset, one CSS line.
Exhibit · applied at page scale
You’re sitting on this right now.

The bench this chapter is rendered on is the same paper, same family, same invert filter — applied at page scale. Scroll back up and the surface around every specimen is the exhibit.

Why it ships.

  • Tiny footprint.Four 120×120 PNGs. ~130 kB total after compression. Inlined as one SVG pattern; one asset load.
  • Real fibre. Fibre direction, warm-cool micro-variation, faint printed teal grid — character no CSS can simulate.
  • No flips. Fibre direction reversing read worse than the original bias.
  • Shuffle instead.Four unique crops, placed pseudo-randomly in a 4×4 macro. 240 px period.
See also