FIELD GUIDE · DV-047 · HOW THIS WAS BUILT
The page is the descent.
Abyssal Station treats scrolling as a physical dive. The document is 3,800 metres of water, and every visible system listens to one master value: current depth.
The Depth Engine
In main.js, buildDepthMap() measures each live section and pins
it to a depth anchor: epipelagic near 140 m, mesopelagic at 620 m, bathypelagic at 1,900 m,
and the station at 3,800 m. depthAt(scrollY) interpolates between those anchors.
The animation loop eases the number so the counter has mass, then updateHUD()
writes depth, pressure (1 + d/10 atm), temperature, light decay
(100·e^(−d/47)), active nav state, background colour via lerpStops(),
and the CSS variables --depth-p, --light-a, and
--pressure-p.
Living Water
creatures.js exposes createSea(), a full-viewport canvas engine
with one organism system per zone. stepFish() runs a boids school;
stepJellies() makes bezier-bell jellyfish with verlet tentacles;
drawAngler() paints a midnight silhouette from its lure glow; trench amphipods
twitch on impulse timers. band() fades systems by depth, and
drift() moves particles opposite the scroll delta so the page feels like sinking.
Finale & Interface
The rail and phone strip use tabular numerals, compact labels, and a pressure fill that rises
as the ocean darkens. The station is inline SVG; stationIO adds
body.arrived, triggering @keyframes flickOn, stationWake,
and the amber windows. The handoff panel uses setDockChannel(): hover, focus, or
tap a station channel to move the radar ping and rewrite the live docking transcript.
Palette & Type
Sora carries display and body text. JetBrains Mono is the instrument voice: depth rail, log, guide label, and footer. Texture comes from inline SVG grain, layered gradients, low-contrast gridlines, styled selection and scrollbar, plus the canvas motion.
Reproduce This
Prompt an agent with a contract, not adjectives:
“Build a single-page scroll experience where the page IS a journey. Define zones. Derive one master value from DOM-measured scroll anchors, then drive a fixed HUD, background interpolation, canvas life forms, and a final state-change from it. Particles drift opposite scroll. Include self-hosted fonts, reduced-motion fallback, keyboardable interactions, no external assets, no libraries.”
Give the journey a unit people can feel, and reserve one emotional colour for the ending.