Six website studies, measured
Each study takes one genre of high-end website and builds it with what browsers can do in late 2026. Each was then benchmarked and given to an independent reviewer, briefed to find what was wrong, missing or generic, and revised.
-
Product launch page, Apple-style
Kestrel 35
A procedurally modelled three.js lens rendered offline into 160 frames, scrubbed by scroll, with exploded view, live aperture blades and a bokeh simulator.
three.js · baked frame sequence · ImageBitmap cache · portrait frame set
-
Real-time 3D explainer
Halocline
Why the fast ocean currents run along western coasts. A WebGPU globe advects 262,144 particles through a Stommel-shaped flow field in compute shaders, with dye you can release.
WebGPU + TSL compute · WebGL2 fallback · Web Worker field build
-
Editorial long read
How to read a concrete wall
Five marks on formed concrete, each on a generated plate with annotations drawn exactly where each feature was placed, and a raking-light figure that casts real shadows from a baked height map.
Canvas 2D generator baked to images · scroll-synced SVG annotation · WebGL relief with shadow marching
-
Multi-page reference, zero JavaScript
Each sheet is half the last
ISO paper sizes from Lichtenberg to ISO 216, drawn to scale. Sheets morph between pages, glossary popovers anchor to their words, and the reading-progress line runs on scroll, all in CSS.
Cross-document View Transitions · scroll-driven animation · anchor positioning · Popover API
-
Product page with a live demo
Tarn
A fictional relief-map app whose hero is the working renderer: sculpt the terrain, change contour interval, sun and tint, and see each layer on its own.
React 19 · Motion layout animation · WebGL2 fragment shader · Web Worker
-
Interactive evidence atlas
Jaw movement and related conditions
Move a 3D jaw through a healthy state and six conditions and read what the research does and does not link each one to, with direction and certainty kept separate and every claim tied to a PubMed record.
three.js + Draco · BodyParts3D anatomy · 72 PMIDs checked against PubMed · sagittal joint schematic · render on demand
The numbers
| Study | Perf. mobile | Perf. desktop | Access. mobile | LCP mobile | TBT mobile | CLS | Transfer | Scroll fps | Review passes |
|---|---|---|---|---|---|---|---|---|---|
| Kestrel 35 | 99 | 97 | 100 | 2,107 ms | 0 ms | 0 | 2,349 KB | 60 | 2 |
| Halocline | 89 | 100 | 100 | 3,153 ms | 24 ms | 0 | 603 KB | 60 | 2 |
| How to read a concrete wall | 94 | 100 | 100 | 2,628 ms | 0 ms | 0.016 | 280 KB | 59.9 | 2 |
| Each sheet is half the last | 100 | 100 | 100 | 1,203 ms | 0 ms | 0 | 60 KB | 60 | 2 |
| Tarn | 88 | 99 | 100 | 3,602 ms | 0 ms | 0.029 | 464 KB | 60 | 2 |
| Jaw movement and related conditions | 98 | 95 | 100 | 1,953 ms | 41 ms | 0.036 | 1,108 KB | 60 | 3 |
Lighthouse 10 with its default simulated throttling (mobile: slow 4G, 4× CPU slowdown), run against a local production build, last measured 2026-11-02. Lighthouse scores move by a few points between runs; treat differences under five as noise. Scroll fps is the mean frame rate while scrolling each page end to end in Chrome on an Apple M4 Pro GPU. “Transfer” is everything loaded during the mobile run.
Review passes are adversarial reviews by a separate model with no context of the build, each followed by a round of fixes. Their reports are in bench/reviews/.
All products and publications are fictional. The facts inside them are sourced on each page.