How the dive was plumbed

10,900 metres in one scroll: a gradient, a gauge, five zones, and a cast of glowing line-art.

Fathom is the simplest possible reading of the brief: the ocean is vertical, so the page is too. No sticky scenes, no horizontal tricks — one long descent where every scroll pixel is a metre of water (well, 1.4 of them).

The water column

The entire ocean is a single CSS linear-gradient on the body — eleven stops from lit turquoise through midnight to true black, stretched across the full document height. It costs nothing, never repaints, and gets the physics roughly right: most of the color change happens in the first quarter, which is also true of the sea.

Pressure-warped type

Each zone heading is set in Crimson Pro and compressed by depth: weight climbs 250→650 while scaleY falls .96→.76 and tracking tightens to −.03em. The hadal studio wordmark bottoms out at scaleY(.72), weight 700. The type is the pressure gauge — the numbers on the left just confirm what the letterforms already show.

The cast

A fixed 2D canvas draws six creature archetypes as pulsing line-art: marine snow, copepods, a siphonophore chain of breathing bells, lanternfish with blinking photophores, two anglerfish with amber-glowing lures, and hadal amphipods with rowing legs. Each archetype owns a depth band (lo…hi of scroll progress); visibility feathers in and out around the band's midpoint, so the fauna changes zone by zone without a single scene switch. Everything drifts on its own phase and wraps at the edges.

The gauge

Scroll progress maps to metres (0 → 10,900), zone name, and pressure in atmospheres (1 + m/10) in a fixed instrument at the left. It's the only chrome on the page.

Constraints

• Zero images, zero libraries, one HTML file.
• prefers-reduced-motion: creatures render once as a still; reveals disabled.
• Copy carries real content — each zone holds one documented work of the artist's depth-based practice.

Type & palette

Crimson Pro (the diving serif) + Hanken Grotesk. Palette: pale sea-glass #BFE8DF, bioluminescent mint #7CF5D4, one amber lure #F5C97C, and the gradient itself.

Deployment

npx wrangler pages deploy set3-e --project-name=set3-e

Static deploy to Cloudflare Pages; three self-critique passes at 1440px and 390px preceded shipping (see NOTES.md).

Designed and built end-to-end by Claude Fable 5.