Deep Dive

• 

  Landing Page

An ocean explainer that earns the time you spend on it.

Project

This is a magazine, not an app.

Most of what we build at hackathons is built to be clicked, swiped, dismissed. We wanted to build something that asked a different question, which is whether the web can still hold attention the way a long magazine essay can. We think it can. So we wrote one.

The piece is called Deep Dive. You scroll, the page descends. The light falls off. The animals get stranger. At each of the five depth zones — sunlight, twilight, midnight, abyssal, hadal — you meet two or three creatures, hand-drawn in inline SVG, and a short editorial caption with a real fact. Click any creature and a tour guide arrives in a side drawer and tells you, in roughly 150 words of streaming text, what is interesting about that animal. The streaming uses the Anthropic SDK. If you don't have an API key, we wrote the monologues by hand and stream them anyway, word by word, so the experience is the same.

There are no frameworks. No build step. No bundler. No Tailwind. Hand-written CSS in a real tag, hand-written JavaScript loaded as ES modules, type set in Charter (with Iowan Old Style and Times New Roman as honest fallbacks). One small Node server for the WebSocket cursors and the Claude proxy. That is the whole thing.

"We have better maps of Mars than we do of our own seafloor." — Sylvia Earle

The project is roughly 8,200 words of essay, caption, and code commentary, of which about 1,300 words are reading material the user actually sees. That is a 6 to 7 minute read, depending on how slowly you scroll. We hope you scroll slowly.

UX

Scroll → camera descends through 5 depth zones, palette shifts, species fade in as inline SVG. Click any species → side drawer streams a Claude tour-guide monologue. Live-cursor multiplayer when the WebSocket server is running.

Stack: Vanilla HTML/CSS/JS · GSAP (CDN) · ESM modules · Express + ws + Claude (optional server)

Built With

• html