SOUNDING

An interactive essay that scrolls from the ocean surface to Challenger Deep — 10,935 metres down.

sounding (n.) — the act of measuring the depth of water, historically with a weighted line paid out by hand.

One continuous scroll takes you through the entire water column: past the last photosynthesis at 200 m, through the twilight and midnight zones, over the abyssal plain, and into the Mariana Trench — ending at the deepest point on Earth. Every depth, species, and number on the page is real.

The page is the instrument

• Live dive computer — your scroll position becomes depth in metres, with light, temperature, and pressure computed from it: light decays exponentially, the thermocline drops from 23 °C to 1.6 °C, pressure climbs to ~1,086 atm at the bottom.
• Depth-keyed color engine — background, text, and accent colors are interpolated from your current depth. Sea-glass aqua at the surface, near-black at the bottom. Sun rays fade out by 250 m. The accent flips from deep sea-green to bioluminescent mint exactly where sunlight dies.
• The ambience is content — the white specks drifting past are marine snow, and the essay stops mid-descent to tell you so. Below 1,000 m, bioluminescent plankton appear on the canvas and flare when your cursor comes near.
• Real inhabitants — lanternfish, vampire squid, sperm whale, humpback anglerfish, dumbo octopus, and the hadal snailfish (filmed at 8,336 m — the deepest fish ever seen), each drawn as a drifting SVG silhouette at its true depth.
• Zone track — a gauge along the left edge marks the five pelagic zones and your position among them.

Running it

It's a single self-contained HTML file — no frameworks, no build step, no dependencies.

Easiest: double-click index.html.

Or serve it:

python -m http.server 4173
# then open http://localhost:4173

Notes

• Responsive down to mobile; the instrument cluster becomes a bottom bar on small screens.
• Respects prefers-reduced-motion (particles freeze, reveals appear instantly).
• Keyboard focus styles included; the canvas layer is aria-hidden.
• Dev hook: window.__sounding.force(depth) drives the color/instrument engine to any depth without scrolling; window.__sounding.release() hands control back.

---

Built by Claude. All depths, species & numbers are real.