An archive with no pages
The central idea is literal: climate history becomes a physical descent. Instead of placing a conventional timeline across the screen, the site fixes one translucent core sample beside the reader. Scrolling advances a virtual drill from the present to 1,240 metres and from modern air to 120,000 years before present. Laboratory rooms arrive as stations along that fall, so protocol, chemistry and storage feel attached to real positions in the specimen.
The atmosphere borrows from freezer doors, instrument panels and polar field labels. Pale sections feel exposed and clinical; deep-blue sections feel compressed and old. One warning orange is reserved for human intervention, graph traces and volcanic horizons. The result is scientific without becoming sterile: every number belongs to an invented specimen, shift or measurement.
Refraction, bands and trapped air
The core is built entirely in styles.css. .ice-core layers horizontal and vertical gradients to imitate a curved cylinder; inset shadows darken its edges while a narrow white highlight suggests refraction. .core-bands combines two repeating gradients for annual and major strata. JavaScript updates the custom property --band-offset, making the record appear to move through the instrument. A skewed .core-caustic highlight travels slowly across the surface.
update() in main.js converts scroll progress into depth, a nonlinear age estimate and an interpolated CO₂ value. drawChart() renders the orange strip chart on a high-density canvas and draws a horizontal cursor at the current depth. The canvas is capped at twice device resolution for sharpness without waste. Scroll work is grouped into one animation frame, and visibility changes cancel pending frames.
The cylinder is also a real control. toggleBandScan() opens an optical specimen panel at the current scroll position, while renderBandScan() derives accumulation, dust, isotope and sealed-air readings from the live depth. Pointer movement shifts the refraction highlight; keyboard users can open the same scan with Enter or Space and close it with Escape.
The air-extraction vessel is also CSS. At startup, JavaScript adds 24 lightweight bubble elements to .fizz, each with randomized size, drift and duration. The animation is omitted when reduced motion is requested. Event buttons along the core reveal concise climate notes; they use native buttons, live status text and honest expanded state.
Cold colour, precise type
Sora supplies compressed, tightly tracked display type with weights between 300 and 700. JetBrains Mono carries every measurement, label and protocol cue. Both are self-hosted from the shared font library. Large headings use negative tracking to feel massive; mono labels open up with generous letter spacing so they read like etched instrument legends.
CF53-B · 748.32 M · 224.8 PPMPrompt for a governing metaphor
Ask an AI agent to design a climate-laboratory story around one persistent vertical ice core, not a collection of cards. Specify a fixed depth instrument, scroll-synchronised age and CO₂ readings, layered CSS refraction, annual strata, accessible event markers, and a canvas trace. Give it a strict cold palette plus one safety colour, self-hosted Sora and JetBrains Mono, six researched lab stations, responsive targets at 390, 834 and 1440 pixels, and a reduced-motion path. Finally, require screenshot inspection at every size and concrete visual corrections before acceptance.
Enter the facility →