How this site is made.

The stack

Astro, fully static. There is no framework in the page and no CSS framework under it: plain CSS with custom properties, and TypeScript written for the one page that needs it. GSAP drives the film scrub, and three.js turns the models. Fonts are self hosted: Fraunces for display, Instrument Sans for reading, Spline Sans Mono for labels. A GitHub Action builds every push and GitHub Pages serves it under a domain from Namecheap, which puts the monthly bill at zero.

The film

The Ridge was modelled and rendered in Blender with Cycles, 192 frames, on free CC0 assets from Poly Haven for the sky, the ground and the grass. A Node script runs the frames through sharp into WebP at two sizes with posters and a manifest. In the browser the frames decode into a canvas and the scroll position picks the frame, so the flyover runs at whatever speed you read. The last movement plants the station: the menu on the ridge is a pure function of how far the film has run, and its landmarks were measured off the frame in pixels. Choosing one is a camera dive, and the page you land on keeps the same crop underneath as a faint ghost.

The lab

Each experiment brings its own engine. The MacArthur is a three.js orbit viewer over models built from public survey data. The Field is a WebGPU compute shader with a spring for every blade. The keepsake is an SVG drawn from a seed, so the same address always draws the same field. Everything that moves has a still or a fallback for browsers and people who would rather it did not.

Type and motion

Fraunces does the art direction with its optical size, softness and wonk axes. Page heads interpolate those axes on a scroll timeline as they leave the screen, display type settling into text, with no script involved. Pages change under native cross-document view transitions. Every motion on the site is switched off for a reduced motion preference. One gotcha for anyone copying this: the default CSS minifier folds scroll timelines into the animation shorthand, which stable browsers reject, so the build minifies CSS with esbuild instead.

Offline

A service worker caches the core pages and posters at install, fetches navigations network first so a new deploy is never served stale, and serves hashed assets cache first. The site installs, and there is a page for when the signal goes. The film frames stay online only.

The store

The shelf is a static page with Stripe Elements in the browser. A Cloudflare Worker holds the catalogue, keeps the pictures in KV, and prices every order again from its own list, because nothing the page believes about money is trusted. It runs in test mode until it does not.

Machine readers

There is an llms.txt, a JSON Resume that also renders the resume page, and schema.org data on the front page. Each page gets its own social card at build time, drawn in the site's type by satori and rasterised by sharp, from the same list the site uses for titles. The log reads git during the build.

Dusk

After sunset the paper cools and the ink deepens on the reading pages. Sunset is guessed from your clock and the month, not from where you are. Add ?dusk=1 or ?dusk=0 to any address to choose for yourself; the choice stays on your device.

The weight

Measured after every build: the HTML, the CSS and the script each page loads, gzipped as a browser would fetch them. Pictures, film frames and models are not counted. They are most of what you see and none of what this table is about.