How both doors were built

A two-wing artist site: a dry gallery and a WebGL ocean, sharing one waterline.

The landing is the thesis: the viewport is split by an animated waterline, and each half is a door. Above, a white-cube gallery of six works; below, the artist's "inner ocean" — a scroll-descent through three depth zones built with three.js.

The waterline

An SVG path recomputed every frame from two stacked sines (long swell + short chop), with a cyan glow line tracing the crest. The foam half "pours" into the sea half because the same points close both shapes. Under prefers-reduced-motion the swell slows to a near-stand.

Below the line: canvas caustics

The lower door's atmosphere is a 2D canvas: seven translucent light shafts drifting on sines plus a shimmer net of displaced horizontal lines — cheap, quiet, and only animated while on screen.

The Deep

The descent is a position:sticky full-viewport three.js canvas behind 3.6 viewport-heights of scroll. Scroll progress maps to camera depth (90 world units); the fog and clear color lerp from twilight blue to abyss black. In the water: 1,600 marine-snow points, additive god-ray planes that fade with depth, nine pulsing jellyfish (squash-and-stretch on a sphere + torus skirt, drifting on individual phases), and a seafloor glow ring that brightens on arrival. Three HTML "rooms" — sunlight, twilight, midnight — fade in beside the dive at their own fathom ranges.

Type & palette

• Marcellus — classical inscription face for titles; it carries the "museum above / myth below" doubleness.
• Albert Sans — quiet modern body.
• Foam #F4F7F6, sea-glass #7FA8A0, abyss #04121E, bioluminescent cyan #55E6D0.

Image slots

Seven <img> slots (six works + artist portrait) with stable filenames hold rendered oceanic gradient stand-ins; the real paintings drop in file-for-file with no code changes.

Deployment

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

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.