Three hundred and forty-one frames
The marble relief that shatters as you scroll is not a 3D scene at all. It is a film strip, and the craft is in how it arrives.
- web
- performance
- scrollytelling
Scroll into Hall I and a marble Creation of Adam grows from a small plate to fill the screen, the camera travelling along Adam's arm towards God's hand, until the relief cracks and flies apart. It looks like real-time 3D. It is 341 still images and a scrollbar.
Studies of an outstretched arm for the Sistine ceiling
Michelangelo
Sistine Chapel studies, c. 1508–09
Why not render it live
Real-time marble that shatters convincingly needs thousands of fragments, soft shadows and physically plausible light, all at sixty frames a second on a stranger's laptop. Pre-rendered frames carry the full weight of an offline render and cost the browser almost nothing: one drawImage call when the frame changes, and nothing at all when it does not.
Weight before wonder
The raw sequence was 39 MB of 1920px JPEGs, far too heavy to ship. A small build script re-encodes it twice:
- Desktop: every frame, 1600px wide, WebP. 11.8 MB in all.
- Phones: every second frame, 960px wide. 3.3 MB.
The originals never reach the public folder, and nothing starts downloading until the visitor is about two screens away and the page has finished loading everything else.
The order of arrival
The loader borrows its sequence from the best examples of the form. Frame one comes first and is drawn at once, so there is always an image. The next ten load together, and how long they take decides whether the rest arrive in full or skip frames on a slow connection. Everything else then streams through a small pool of parallel loaders.
Scrubbing never waits. The canvas always draws the nearest frame that has arrived, and the next six in the direction of travel are decoded ahead of time, so decoding never stalls a draw. The canvas is also never rendered wider than the frames themselves: pixels beyond the source resolution cost every draw and add no detail.
One clock
The frames are not driven by scroll position directly. They follow the same smoothed timeline that scales the plate and reveals the words, so picture and motion cannot drift apart, even when a trackpad flings the page.
The effect is the easy part. The discipline is making it arrive on time, on any connection, without anyone noticing it was loaded.
The hall is on the home page, just after the introduction.