Redesign: page background and topic map, prepared at build time #30

Part of the redesign build (parent issue linked in the sidebar). Targets the redesign branch. Needs the foundations issue.

The page background and the topic map, looking as they do in the prototype, but without a shader library or heavy work in the browser.

Background, fixed behind the content

• Paper. Paper Shaders' halftone dots printed on a plain white image: hex grid, "gooey" dots, dot colour 87% of the way from #f2f1e8 to #2b2b2b, grain 61%, 10px dot spacing, shown at 6% opacity. The texture repeats exactly, so ship it as a small tiled image.
• Corner pattern. The "Ripple" rings around the top-right corner, at 6% opacity: 7px dot spacing, grid at 14°, reach 142% of the window's short side, 3 rings, each ring 60% as dark as the one inside it, twist 165%.

Topic map ("Best of three")

• Three islands in grey halftone dots (#9a9991, about 7.8px spacing), with orange dots for Customer success, Product and AI agents, and grey capital labels: IDENTIFY THE VALUE, DECIDE WHAT TO BUILD, SOFTWARE FACTORY.
• The land fades over the outer 4% of its box, so no edge looks cut.
• On the home, clicking an orange dot filters Writing. On About, it jumps to the matching part.
• The map's shape, labels and dot positions come from the prototype source (see the parent issue).

The pattern makes way for the map

• The corner pattern alone is masked, so the paper keeps going under the map: fully clear inside the ellipse that fits the map's box, back to full strength at 1.55 times that size.
• On articles, the mask is a band as wide as the text column, fading out between 16px and 112px on each side.
• The pattern stays fixed while the page scrolls, so the mask follows the map.

How to build it

• Compute the map's dots and the corner pattern's ink when the site is built, and ship them as small data files.
• Draw them once on a canvas in the browser, with a few KB of plain code: no WebGL, no shader library.
• On resize, stretch what is already drawn. Redraw only after resizing stops, and only if the size changed a lot.
• For reference, in the prototype the corner pattern took 78ms to draw, the paper shader 22ms per frame while resizing, and the map about 450ms to prepare.

Done when the preview matches the prototype's look, loads no shader library, and resizing the window doesn't lag.