How Sounding was made

One fixed WebGL canvas, one very long page, and a single rule: scroll position is depth. Everything else — color, fog, creatures, instruments — is a function of that one number.

01 — The spine: scroll → depth

The page is ~1,300vh of mostly-empty sections. Each section carries a data-d attribute (the depth in meters at which its top edge crosses the viewport top). At load, a piecewise-linear map is built from the actual DOM offsets, so copy and physics can never drift apart.

depth = piecewiseLerp(scrollY / maxScroll)   // 0 → 4,207 m
camera.position.y = -depth * 0.05            // 1 unit = 20 m
waterColor  = gradientStops(depth)           // 9 hand-picked stops
sunlight    = exp(-0.023 * depth)            // ~1% at 200 m
temperature = 1.8 + 22.2 * exp(-depth / 380) // °C, for the HUD

Smooth scrolling is Lenis; DOM reveals are GSAP ScrollTrigger. The 3D loop reads the same scroll value, so the two worlds stay glued.

02 — The water

• Backdrop cylinder — an inverted cylinder around the camera with a vertical gradient shader: light remembered above, dark promised below. Its color lerps through nine depth stops, from tropic teal #2FA3C7 to hadal black #010409.
• God rays — 14 additive gradient planes, randomly scaled and tilted, flickering on independent sine phases. Their intensity is pow(sunlight, 0.65), so they die on cue around 300 m.
• The drowned sun — one enormous soft point sprite overhead; UnrealBloom turns it into a halo. Gone by 150 m.
• Marine snow — 3,200 GPU particles in a 90-unit slab that wraps around the camera in the vertex shader (mod(y − camY)), so the same particles fall past you for 4,207 meters.
• Fog + bloom ramp — FogExp2 density and bloom strength both ease up as light dies. The deep isn't darker so much as thicker.

03 — The living things

• Jellyfish (3) — procedural: a hemisphere bell whose vertex shader squeezes it on a traveling sine pulse, a fresnel-glow fragment shader, nine ribbon tentacles swaying on phase-offset sines, and a pulsing point-sprite heart inside. No textures, no models.
• Lanternfish school — 56 fish × 2 photophores as additive points on Lissajous-ish paths, blinking between amber and cold blue. They only exist between 2,200–3,000 m.
• The lure — a single warm point sprite, wandering slowly at 2,650 m. The copy does the rest of the work.
• Bioluminescent plankton — a 320-particle pool. Moving your cursor below 420 m emits cyan sparks at the unprojected pointer position; below 1,200 m the deep also pops on its own.
• The floor — a noise-displaced plane with vertex-baked lamplight, a lathe-turned sounding lead, and one additive light cone. Arrival retires the HUD.

04 — Art direction

Type is Instrument Serif (display, italic for zone names) against IBM Plex Mono (the instrument: depth, temperature, pressure, sunlight). The HUD depth counter lerps toward the true value so it feels mechanical, not digital. Grain, vignette, and a cursor glow that only exists once the sun is gone — you are the light now — finish the atmosphere.

05 — Iteration log (three passes)

06 — Reproduce it

abyss/
├── index.html          # importmap: three → ./lib/three.module.js
├── css/main.css        # palette, HUD, zones, grain, vignette
├── js/main.js          # ~700 lines: scene, shaders, scroll rig, HUD
├── lib/                # three.module.js + jsm/postprocessing, gsap, lenis
└── fonts/              # Instrument Serif + IBM Plex Mono (woff2, self-hosted)

# serve
python3 -m http.server 4791
# deploy
npx wrangler pages deploy abyss --project-name=<name>

No build step, no framework, no textures, no 3D models — every visual is math in a shader or a DOM node. Total payload ≈ 1 MB, almost all of it three.js itself.