The whole website is one file

A page that downloads a rendering library, a font service, an analytics beacon and three trackers before it can say hello is not a fast page with some overhead. It is a page you have handed to other people. We wanted the opposite: one file, one request, nothing rented.

The budget

The published page is hosted as a saved page, which caps a document at 256 KiB. That number turned out to be a gift. A budget you cannot argue with removes every debate about whether one more library is fine. It never is; there is no room.

Inside the budget live two font faces, the entire stylesheet, the copy, and the WebGL scene. What is not inside it: a CDN, a script tag pointing anywhere, analytics, cookies, storage, forms and API calls. Open the network panel and it stays empty after the document lands.

No Three.js, no meshes

The ocean is not a mesh. There are no vertices to stream, no glTF to download, no texture atlas. Every surface is described analytically and evaluated in a fragment shader: ten directional swell bands with four harmonics each, ten smaller wind-ripple bands, and dispersion driven by gravity so the wavelengths never fall into a repeating pattern.

The ice floe, the two suits and the seal are signed-distance geometry. They share one camera, one depth test and one visibility pass, which is also what lets the ice refract the seal and the seal appear in the reflection of the wet ice: it is all the same scene, resolved once.

The trade is honest. Analytic geometry costs shader instructions where a mesh would cost bytes and memory. For a landing page that must arrive instantly and then stay alive for a few seconds of attention, instructions are the cheaper currency.

Frames are a budget too

The renderer targets up to 2x pixel density with a 1.5 megapixel ceiling. When frames run long the budget is lowered gradually; when there is headroom again it is restored. Physics runs in bounded substeps, so a stalled tab resumes on the beat instead of teleporting.

Motion is a preference, not a decision we get to make for you. The pause button and the system reduced-motion setting stop the water, the buoyancy, the dancers and the seal together, and ordinary scrolling keeps working. Without WebGL you get a CSS gradient that still reads as an ocean.

What it buys

Small pages are not a virtue in themselves. What the constraint really buys is independence: no third party can slow the site down, change its terms, or watch the people reading it. That felt like the right first thing to build for a company whose whole argument is that technology should ask less of you.

The source is public, including the shaders, the physics and the packaging script that inlines the whole thing. If you want the details, the repository has them in more depth than a blog post should.