COLD,
BUILT IN.

The concept

Seed Vault 78°N treats preservation as serious public infrastructure, not optimistic eco-branding. Its visual language begins outside: a monumental concrete portal sits in a field of blue-grey permafrost. The visitor then spends a deliberately long scroll interval underground before reaching the warmer, kraft-paper catalog. That contrast is the story. Brutalist geometry communicates duration and protection; safety cyan appears sparingly as an operational signal, never decoration.

The content follows the same movement: spectacle gives way to procedure, then specimens, global cooperation, and the plain account of ICARDA’s 2015 withdrawal. The “black box of agriculture” statement names the vault’s restraint—it stores possibility without claiming or consuming it.

The descent system

The signature corridor is built from ordinary DOM elements in index.html, not a video or image. main.js creates fifteen .rib elements. The renderTunnel() function converts the scroll position inside .descent into a 0–1 progress value, then cycles every rib through scale, opacity, and brightness. CSS perspective, clipped ceiling and floor planes, a growing .far-door, and a luminous center seam establish depth.

The same progress variable drives frost opacity, cold haze, the cyan temperature bar, depth from 000 to 130 metres, and temperature from −4°C to −18°C. Four stage labels change at meaningful thresholds. scheduleTunnel() requests a frame only when scroll or resize makes the scene dirty; hidden tabs cancel it. Reduced-motion visitors get a stable corridor.

Catalog, map, and material

The catalog’s steel drawers are accessible tabs. selectDrawer() synchronizes aria-selected, keyboard focus, and the visible specimen. The Transmission Scan control calls toggleInspection(); once live, a cyan inspection slit follows pointer position through scheduleInspectionLight(), while keyboard and touch visitors can toggle the same x-ray state. Every packet contains inline SVG paths and ellipses drawing wheat, taro, or lupine over kraft stock.

The donor map is another inline SVG, assembled from simplified continent paths, dashed routes, and pulsing country points. Atmosphere comes from inline turbulence grain, uneven concrete gradients, institutional rules, paper fibres, and heavy drawer shadows. Motion pauses under reduced-motion rules; request-animation frames are cancelled when the document is hidden. Nothing depends on a remote asset.

Palette and type tokens

Archivo carries institutional display text at heavy weights and aggressively tight tracking. Manrope keeps explanatory copy humane and open. Space Mono owns accessions, coordinates, dates, and operational readouts. These roles are defined as --archivo, --manrope, and --mono in styles.css. Tabular numerals stop live readouts from jumping; balanced headings and constrained paragraph measures preserve the severe editorial rhythm.

Reproduce this

Prompt an AI agent to create a self-contained arctic archive experience in semantic HTML, CSS, and JavaScript. Ask for one long sticky scroll sequence whose architecture responds continuously to progress, and require every readout to tell the same physical story. Specify a dominant cold field, one safety accent, tactile specimen materials, accessible working tabs, inline SVG botany, and a factual operational narrative. Demand mobile, tablet, desktop, reduced-motion, hidden-tab pausing, and screenshot-based iteration. Most importantly, ask the agent to make the transition between exterior, tunnel, and archive feel like a change in temperature—not merely a change in background colour.