HADAL

HADAL is the website of a non-profit expedition that takes a two-person submersible to the floor of the Kermadec Trench, 10,047 metres down, and gives the footage away. The page has one job: make that depth felt, then turn the feeling into donations for the next dive. So the scroll is the descent. The gauge on the right counts every metre, the water darkens as you go, and the page ends standing on the trench floor.

It is a concept site, made by the Laarpi team with Laarpi's library and process. The expedition, the submarine and the crew are invented. The ocean facts are real, and the footer says both.

The idea

The brief put the whole story in one sentence: the sea takes red first, then all of the sun, and below 1,000 metres the only light is what animals make and the lamp you hold. Everything on the page follows from that. Colour is the clock. Light is the narrator. The cursor is the submarine's lamp.

The audience was set before any design: ocean-curious people, documentary lovers and small donors who would happily pay for a metre of the dark. The voice was specific, dry and quietly awed. The brief also listed what to leave out: sea creatures built from basic shapes, stock ocean photography, inspirational filler, and any claim of a first or a record the expedition could not back up.

That last rule shaped the copy. Every zone gets one true, specific fact. The page says that red light is gone ten metres down, that three in four animals in the midnight zone make their own light, and that pressure rises by one atmosphere every ten metres. It never says the dive is the deepest, the first or the most important.

What you can do

• Dive. Scrolling lowers you through the water column. The water colour, the light and the instruments are all computed from your depth, so the gauge and the picture always agree. The light meter on the gauge loses red, then orange, yellow and green, in step with the water.
• Look up. At 0 m you are just under the surface, looking up through Snell's window, the circle of sky that refraction squeezes overhead. The title dissolves as you leave it.
• Hold the lamp. At 1,000 m the page goes black: "Lights out." From there a lamp follows your cursor, or your finger on a phone. Animals appear only where the beam falls. Put it on the Atolla jellyfish and it fires its spinning blue alarm. Look too closely at the anglerfish and its lure goes out.
• Read the machine. In the abyss, the submersible is drawn as an engineering section of its titanium sphere, with a hairline spec table beside it: crew, hull, rated depth, descent rate, bottom time.
• Touch the floor. At 10,047 m floodlights fade up on a scanned seabed and boulder. The donation tiers sit here, priced by the metre and by the minute of footage.
• Come back up. "Drop ballast" returns you to the surface in six seconds.
• Listen, if you like. The Sound button turns on a generated soundscape: a surface wash that darkens with depth, a low hull drone, a sonar ping with its echo below 150 m, and a click when the lamp comes on. It stays silent until you press it.

How it's made

There is one fixed WebGL scene, and the camera is the submarine. The backdrop is calculated rather than painted: the sky seen through the surface is a real CC0 sky photograph, bent by the refraction maths, with light shafts converging on the refracted sun. Below that, the water's colour is worked out per metre, from turquoise down through blue and petrol to near-black.

Marine snow is instanced particles that streak with your descent speed and catch the lamp. The animals are light only. The Atolla is drawn in crimson contour lines, the siphonophore is a spiral of travelling pulses, lanternfish are rows of photophores, the loosejaw sweeps a red searchlight. None of them is a 3D model, which keeps the page light and avoids the rubbery look of creatures assembled from spheres.

The floor is the only place real geometry arrives: a scanned seabed texture set and a scanned boulder from Poly Haven, lit by shadow-casting floodlights. The boulder was compressed from 1.47 MB to 185 KB, and both load lazily, only as you near the bottom.

The type rises with the pressure. Sofia Sans Extra Condensed, a tall narrow grotesk that reads as vertical as the water column, runs from weight 230 at the surface to 900 on the floor. Spectral in a light italic is the documentary narrator. B612 Mono, drawn for Airbus cockpit displays, runs every instrument. The layout is a 12-column grid with a reserved rail for the gauge that no copy ever enters; on phones the gauge moves into the header.

The scrollytelling website examples and interactive website examples show where HADAL sits among our other concept sites. If you are planning something similar, how to build a 3D website walks through the decisions in order.

Speed

Measured on 6 October 2026, cold, with an empty cache, on our phone profile: slow 4G (1.6 Mbps down, 150 ms round trip), CPU slowed four times, a 390 × 844 screen.

The loader is part of the story: you wait just under the surface, looking up at Snell's window, and its blurred rim sharpens into a rippling edge as the real progress counts up. At 100% the window opens into the sky of the first scene. Before this loader pass, the same page took 7.2 seconds to its first full frame on the same profile and pulled 756 KB from four origins. Libraries are now bundled and served from the site's own origin, and the seabed (about 1.8 MB of assets in all) waits until you are close to the floor. Rendering resolution is capped and drops when frames run long, rendering pauses in hidden tabs, and everything is released when you leave. The phone profile slows the CPU but not the graphics chip, so real phones can take longer on the shader work. Fast websites with 3D covers the same techniques.

Accessibility

With reduced motion on, smooth scrolling is off, text appears at once, and each zone is a composed still that still changes colour with depth, so the story of the light survives. Nothing flashes: the Atolla's alarm is a slow rotating wheel. Sound is off until you ask for it. The lamp and the animals it reveals are pointer and touch effects with no keyboard equivalent, so every fact they decorate is also written in the page copy, and the donation buttons, the sound toggle and "Drop ballast" are ordinary buttons. Accessible motion explains how to make the same calls on your own site.

Provenance and credits

A concept site made by the Laarpi team with Laarpi's library and process. It was not produced end to end by SI, Laarpi's website agent. Sites SI builds on its own carry a "Built by SI" label with their build time and cost.

The donation tiers use Laarpi's Polar checkout module. With no account connected, the buttons are disabled; on a real site, payments explains how they connect.

Third-party pieces, all free for commercial use:

All shaders, the creatures, the bioluminescence, the loader and the sound are original code written for this site.

For another story told down a single scroll, see Aster & Kiln, where a lump of clay becomes a vase, and Salt & Smoke, one long camera move around a single fire. To start your own from this one, remix it.