MERIDIAN is a fictional hadal research observatory. The page has one metaphor and commits to it totally: the scrollbar is a winch, and the page is 10,935 metres of water column.
Instead of sections, the page has depth zones — the five real pelagic layers of the ocean. Scroll position maps linearly to metres; everything else derives from that one number: the water color, the particle life, the pressure readout, the zone name on the gauge. The design system is oceanography itself.
The background is not a color — it is a continuous function of depth, interpolated between six real water-column stops. The two accents are the only light sources that exist down there: biology, and the lamp we bring.
Chivo Black — zone headings. Compressed, upright, pressure-resistant; set with a hollow-stroke ghost line naming the scientific layer.
Hanken Grotesk 300 — field-report body text.
Spline Sans Mono — instrument voice: the depth gauge, species tables, coordinates.
| Element | How it works |
|---|---|
| Water column | A fixed canvas repaints a vertical gradient every frame. Depth eases toward scrollY-mapped metres; colors interpolate through six oceanographically ordered stops (surface teal → hadal black). |
| Depth gauge | Fixed HUD: metres (60fps-eased), pressure at 1 + depth/10 atmospheres, current pelagic zone, and a glowing winch rail. It flips from dark-on-light to light-on-dark as you leave the surface. |
| God rays | Seven animated trapezoids composited with overlay blending, faded out entirely by 420 m — the real photic limit is the design's fade curve. |
| Marine snow & plankton | One particle field, two behaviors: pale drifting snow appears below 300 m; bioluminescent motes flash on sine-wave clocks below 900 m with canvas shadowBlur glow. |
| Accessibility | prefers-reduced-motion removes easing lag and animations; depth still tracks scroll so the metaphor survives. Focus rings in bioluminescent cyan. |
| You do | The page does |
|---|---|
| Scroll anywhere | You sink. Water darkens, pressure climbs, the gauge counts metres |
| Pass 300 m | Marine snow begins to fall |
| Pass 900 m | The plankton start signalling in cyan |
| Reach 10,935 m | Station Hadal-1: the only CTA at the bottom of the map |