Field guide · how it was made
Reading the build
Cryosphere is a Spoor S design showcase: a fictional ice-core archive built around one idea, that scrolling is a descent. Here is how the piece is put together, from the film to the fallback.
Concept
The archive is the interaction
Cryosphere is a fictional ice-core archive. The brief was a single idea, held to across every part of the page: scrolling down is descending into a glacier, and every metre of ice is a step back in time.
Rather than illustrate that with a chart or a globe, the descent itself carries the meaning. The film is the material, not decoration. The palette stays cold and bright on purpose. The one warm colour, a warning orange, appears only on the measured numbers, the human-made break in the record.
The film
An AI descent, scrubbed by scroll
The core asset is a short cinematic film of a continuous vertical descent through blue glacial ice, generated with an AI video model. It was extracted to one hundred WebP frames and drawn to a canvas whose frame index follows your scroll position.
The scrub is deliberately not linear. A scroll-dwell engine builds a small look-up table from a sum of Gaussian curves centred on each data beat. Where the curves peak, the film slows almost to a stop, so descending feels like lowering yourself with a hand on the brake. Between beats it moves freely again.
Data beats
Real text at every depth
At each dwell point a depth-stamped reading reveals: a year, a depth in metres, one measurement and one sober line. These are real, selectable, accessible DOM elements positioned by scroll, not baked into the video. The numbers count up as they arrive, and a depth gauge on the right tracks how far down you are.
The readings are plausible fiction, from the surface at 2026 down to roughly ten thousand years at the bedrock. No real institutional data is claimed or collected.
Accessibility
A second experience, not a kill-switch
If you prefer reduced motion, or if the frames fail to load, the site does not break. It switches to a sharp still of the glacier surface followed by the full record as a static, fully readable vertical list. Nothing is lost, it is simply held still.
Every reading is real text with logical headings, a skip link and visible focus states. Contrast meets WCAG AA throughout, and the orange numbers use the darker warn tone so they stay legible on the ice-white cards.
Performance
Protecting the first frame
The frame set is about three megabytes on desktop and half that on mobile, which loads its own lighter frames. To keep the first paint fast, a spread of critical frames is fetched before anything is revealed, then the gaps fill in batches. Decoding happens off the main thread with createImageBitmap, and if a target frame is not ready the nearest loaded one is drawn so the canvas never flashes white.
The loader shows a thin progress bar and exits with a frost blur once the core is readable. Fonts are self-hosted and preloaded, and all frames are served from the same origin under a strict Content Security Policy.
EU AI Act
Disclosure
The moving image on this site was generated with AI. In line with the EU AI Act transparency obligation for synthetic media, this is stated in the footer and here.
Bewegend beeld met AI gegenereerd (Higgsfield/Kling).