How it was made

Forty-one orders of magnitude, and one photograph

A browser homage to the Eameses' Powers of Ten, in which the honest answer to every rendering question turned out to be arithmetic. Thirty-one of the thirty-two stations are still drawn in code. The one at the exact middle of the descent is a real overhead photograph of the site's owner, lying on a blanket, reading.

The concept

The whole exhibit is one number. The engine holds a single value: the base-ten logarithm of the width of your screen, measured in metres. It starts at 26.94, the observable universe, and scroll drags it down to -14.40, a single proton. Thirty-two stations sit at fixed points along that ruler, and each one is drawn at a scale of ten to the power of its own width minus the current width.

That is the entire trick, and it is why the descent has no cuts in it. Nothing is sequenced, nothing is timed, nothing waits its turn. A world grows out of a point in the centre of the frame, swells until it fills the screen, keeps growing past it, and thins away while the next one is already arriving. Every station also places its subject so that the next station's subject sits exactly at the frame centre: the Sun is centred inside the galaxy, the coastline is centred on the globe, one nitrogen atom is centred on the base pair. Nothing ever has to jump, because there is nowhere for it to jump to.

Everything is drawn, nothing is loaded

The page requests no images at all. The cosmic web is a ridged multifractal noise field with two-pass domain warping, where filaments are the near-zero level sets of three smooth fields raised to a high power, and the voids are carved by a slower envelope. Galaxies are then rejection-sampled against that density, which is why they cluster along the threads instead of scattering evenly.

Below that: particle spirals with an arm-phase distribution, real orbital radii for the solar system, a procedural Earth built by inverse-projecting each pixel of the disc back to a latitude and longitude, fractal relief for the coastline, recursive rectangle subdivision for the city grid, bezier anatomy for the figure and the hand, a double helix generated from its measured pitch and rise, and an electron cloud sampled by rejection from the square of a real hydrogen wavefunction. Where a measurement exists, the code uses it. The Moon sits at 384,400 km. The helix is 2.0 nm wide with one turn every 3.4. A proton's charge radius is 0.84 fm.

Three passes, and what each one was for

Pass one built the ledger of stations and the scene library, and proved the zoom was continuous. It also ran at 10 frames a second, which is not a website.

Pass two was the honest one. Profiling every scene individually showed that none of them cost more than two milliseconds: the drawing code was never the problem. The cost was everywhere else. Half-faded layers were being composited through a full-viewport scratch canvas, which is a software raster and a twenty-megabyte texture upload every frame; a proxy that folds each layer's opacity into the scene's own globalAlpha deleted that entirely. The travelling palette was being written to custom properties on the document root, invalidating style for every node on a thirty-thousand-pixel page; scoping it to the two chrome containers fixed it. And a canvas font string that changed size every frame was defeating the browser's text cache, so the numerals were quantised to whole pixels. Slow-changing worlds became baked plates with their instrument marks still drawn live. Main-thread work per frame fell from ninety milliseconds to about 2.3.

Pass three was composition and truth. Point sources were normalised to hold a constant size on screen, because a star is a point at every scale and must not become a dinner plate when the world around it is magnified. The readout was corrected: it had been reporting the diameter of the drawing disc rather than the width of the visible frame, and a piece whose promise is that the numbers never lie cannot be out by a factor of one and a half.

If you wanted to build this

The useful instruction to give an agent is not a list of scenes. It is the invariant. Something like: build one continuous scroll-driven logarithmic zoom; hold a single current log-metres value; draw every stage at ten to the power of its own size minus that value; compose each stage so the next stage's subject is dead centre; and never let a layer cut. Everything else follows from that, including the failures. Ask for the scale readout to be derived from the same numbers the geometry uses, so the label and the picture cannot disagree. Then ask for a frame budget in milliseconds rather than a vague request to be fast, and insist on measuring per-scene cost before optimising anything, because the intuition about what is slow will be wrong.