Nate Bowers

A live 3D model of the Northern California coast, from Stinson Beach down to Big Sur, held at permanent golden hour. The terrain is real: built from USGS elevation data (AWS Terrarium tiles) into a committed heightmap, with the bay shaped from real bathymetry.

The ocean is a Gerstner-wave surface driven by live NOAA NDBC readings from station 46012 off Half Moon Bay, fetched through /api/conditions. The same conditions-to-wave mapping that shapes the water also places the buoys and the ferry, so they actually sit in the swell rather than floating on top of it. One shared exponential height-fog ties the whole scene into a single atmosphere; a little bloom gives the golden-hour glow.

• · Next.js (App Router) + TypeScript
• · three.js · react-three-fiber · drei · postprocessing
• · Deployed on Vercel
• · Type: Instrument Serif · Schibsted Grotesk · IBM Plex Mono

Every visitor gets the same coast, at the fidelity their device can carry:

• Full — the complete 3D scene on a WebGL2 desktop.
• Calm — a lighter tier on phones and weaker machines: fewer trees, lower resolution, the same place.
• Still— a static image of the same coast when there's no WebGL2, with a quiet “load the interactive version” opt-in.

A few things you might not catch on the first loop:

• A humpback whale breaches near the offshore buoy on roughly 1 in 20 loads. Force it with ?whale=1.
• A container ship crosses the far offshore shipping lane.
• A clickable shark fin dives with a splash and resurfaces somewhere else. It keeps a quiet tally.
• The 404 is a hand-built message in a bottle.
• Each station panel carries a live surf-cam link.
• Number keys fly the camera: 1–5 for the buoys, 0 to return home.
• A “calmer seas” toggle drops the graphics tier by hand.