How the sea was computed

A GLSL ocean, an almanac of works, and a tide pool crossed sideways — one HTML file plus a shader.

The hero admits its own trick — "the sea below is computed, not filmed" — because the computation is the portfolio piece. The artist works between salt and signal; her homepage is literally both.

The GLSL sea

A fragment shader on one triangle. Above the horizon: a storm-pale gradient with a faint sun. Below it, screen rows are treated as distance: perspective compression maps uv.y to a noise-field scale from 60 (far) to 4 (near), two FBM octave stacks warp each other for wave shape, and shading mixes deep teal to lit gray by wave height. A sun-glitter path widens with proximity and glints where w²³ spikes; foam appears above the .78 crest threshold. DPR is capped at 1.6 and the shader pauses offscreen.

The tide table

Works are indexed like a harbour almanac — number, title, medium, year, and a tide reading whose rise/slack/ebb doubles as a timeline of the practice. On fine pointers a fixed 260px preview follows the cursor (pointermove → left/top), fading between cached images per row. On touch it simply doesn't exist; the table is complete without it.

The tide pool

The world section is a 340svh scroll区 with a sticky viewport: vertical progress maps to translateX across a flex strip of "cells" — artist statements and three specimen plates tilted like objects left to dry. Behind them a 2D canvas sways fourteen kelp ribbons (jointed polylines on phase-offset sines) and lifts forty stroked bubbles. A progress bar reads as a tide line filling east.

Type & palette

• Syne (700–800, uppercase) — an art-school display voice for wordmark, channel titles, table works.
• Inter — data, prose, interface.
• Bone #EFEFE9, ink #14171A, sea slate #39505A, and signal coral #FF5C49 reserved for what transmits.

Image slots

Nine <img> slots (six work previews, three pool specimens) with stable filenames hold rendered gradient stand-ins for later photography.

Deployment

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

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.