Zo is TRENCH gebouwd

Het logboek van een duikmissie, verteld door licht. De pagina daalt met de lezer mee van zonovergoten water naar de trench-bodem op vier kilometer. Diepte is de enige verteller: één scroll-waarde stuurt kleur, licht, leven en instrumenten.

Het water

• Renderer: three.js WebGPURenderer met TSL node-materialen, orthografische camera, één fullscreen quad als oceaan.
• Lichtschachten: twee sinusbundels in poolcoördinaten rond een lichtbron boven het beeld, met exponentiële falloff. Ze doven volledig onder de schemerzone.
• Kleurverloop: twee verticale gradiënten (ondiep en abyssaal) die op diepte in elkaar mengen, plus traag driedimensionaal ruis voor waterbeweging.
• De duiklamp: een exponentiële gloed rond de cursorpositie die pas aangaat zodra het donker genoeg is. De bezoeker wordt letterlijk de lichtbron.

Het leven

• 1500 plankton-sprites als InstancedMesh met SpriteNodeMaterial. Positie, grootte, kleur en pulsfrequentie komen allemaal proceduraal uit hash(instanceIndex), er is geen attribute-buffer.
• Elke sprite is een radiale falloff op zijn uv, additief geblend: zachte lichtjes, geen textures.
• Plankton bij de cursor-lamp licht vier keer feller op: aanraken is antwoorden.

Instrumenten en type

• De dieptemeter rechtsonder rekent scroll om naar meters en bar, met zonelabels van DAGLICHT tot TRENCH.
• Display: Oswald condensed. Instrumenten: Share Tech Mono.
• Palet: abyssaal #01070C, bioluminescent turquoise #3DF5C8, diepzee-violet #8A5CFF.
• prefers-reduced-motion bevriest de tijd; de afdaling zelf blijft, want die is gebruikergestuurd.

Credit

Site 06 van 25 in de Vormula demo-reeks. Concept, code en copy: Claude (Fable 5), in opdracht van Vormula Studio.