← BACK TO THE POINT

FIELD NOTES / HOW THIS WAS BUILT

The guide

Concept & art direction

Hollow Days is a dawn-patrol surf club and swell journal for a fictional cold-water left, Carrach Point. The audience checks the buoy before the news, so the site opens with instruments instead of marketing: a barreling-wave video hero, then a live-drawn tide curve and swell-period dial rendered like marine gauges. The directive was the ocean is the interface — every section carries water in it: a tide line rising behind content as you scroll, kelp swaying in the margins, and a WebGL pool you can drag wakes across.

Palette

Kelp green does the work an off-black usually does, so the dark theme reads as water, not as a default dashboard. Peach is rationed: needles, the now-marker, verdicts, one button.

Type pairing

Techniques: the instruments

Both gauges are hand-drawn 2D canvas, DPR-scaled, with honest axes. The tide curve is a real semidiurnal model — an M2 constituent (12.42 h) plus a smaller S2 (12 h) — so highs drift later each day exactly as real tides do. Extremes are found numerically and labelled with times; the “now” marker uses your actual clock.

// tide height in metres above chart datum
h(t) = 2.4 + 1.7·sin(2π(t − 1.51)/12.42)
           + 0.35·sin(2πt/12 + 0.9)

The swell-period dial sweeps 0–20 s over 240° with a groundswell band at 12–20 s. A simulated buoy feed re-targets every five seconds; the needle chases it with an eased pursuit and breathes on top — two stacked sinusoids that mimic heave:

breathe = 0.22·sin(t/1400) + 0.08·sin(t/530)
needle += (period + breathe − needle) · 0.06

Techniques: the water you can touch

The divider is a classic ping-pong wave-equation simulation in WebGL1: a 256×128 float texture stores height in R and velocity in G. Each frame, every texel accelerates toward the average of its neighbours, damped so a wake lasts about four seconds. The pointer injects a Gaussian drop scaled by pointer speed; idle drips keep the pool alive when nobody’s touching it.

// simulation step (fragment shader)
avg = (left + right + up + down) / 4.0;
vel += (avg - height) * 2.0;
vel *= 0.988;            // ~4s memory
height += vel;

The render pass derives a normal from the height gradient and lights it with the site palette: deep kelp base, sea-glass diffuse, a peach dawn specular, and a foam crease wherever curvature spikes. Under prefers-reduced-motion, or without float-texture support, the canvas swaps for a calm CSS gradient.

The three passes

• PASS 1Correctness: scroll-reveals now fail open so nothing can stay invisible, the water canvas renders warm-up frames so it never captures black, the kelp fronds no longer cause horizontal overflow at 390 px, the hero video is fetched once as a blob (no aborted range-requests, and phones get the poster instead), and the nav gains a solid backdrop once you leave the hero.
• PASS 2Elevation: added the crosshair readout to the tide curve — run a pointer across it and it quotes height at any hour — enlarged the period dial inside its card, gave the water a third ambient octave so it reads alive even in a still frame, and lowered the guide’s tide band.
• PASS 3Taste: removed the second kelp cluster that crowded the shed photograph (Chanel rule), checked 390 px seriously — nav collapses to wordmark + guide, gauges stay legible, data strip reflows to two columns — and verified the reduced-motion path: poster frame instead of video, static instruments, gradient instead of WebGL.

Do this yourself

1. Pick a subject with a native instrument panel — tides, weather, trains, ovens. Ask Claude for a concept where the data is the hero, not a screenshot of it.
2. Fix a five-colour palette from the subject’s physical world (water, foam, dawn, kelp, rubber) and ban yourself from defaults like off-black.
3. Choose three type voices with jobs: a grotesk for structure, an italic for feeling, a mono for data. Never let them swap jobs.
4. Have Claude build the signature element first — here, the canvas gauges with honest axes and a simulated feed — before any layout exists.
5. Add one physics moment (the ripple pool) with a graceful fallback for reduced motion and old GPUs.
6. Write the copy like a club noticeboard: plain verbs, real numbers, one running joke (the kettle).
7. Screenshot, critique, fix — three times, desktop and 390 px. Remove one thing at the end.
8. Ship it before the tide turns.

HERO VIDEO: HIGGSFIELD SEEDANCE 2.0 · STILLS: GPT-IMAGE-2 · INSTRUMENTS & WATER: HAND-WRITTEN CANVAS/WEBGL, NO LIBRARIES · TYPE: GOOGLE FONTS
BUILT WITH CLAUDE FOR THE FABLE 25 SERIES. THE FEED IS SIMULATED; THE COLD IS REAL.