01 · Creative premise
Turn the browser into a pressure vessel.
The page is not a brochure about a deep-sea station. It is the descent itself. Every major design decision follows that sentence. Scroll position becomes depth, the palette loses light, the interface reports pressure, and the story shifts from the familiar surface to an invented human settlement at the trench floor.
One physical metaphor should control the copy, layout, color, motion, and interaction at the same time.
The institute is fictional. The Challenger Deep, its scale, and the broad ocean zones are real. That lets the experience use the rhythm of scientific communication without pretending the station exists.
02 · Narrative structure
Five zones. One continuous fall.
The document is divided into semantic sections, each carrying a real depth value and a named ocean zone. The text grows stranger and the environment darker as the reader moves through Sunlight, Twilight, Midnight, Abyssal, Hadal, and finally the trench floor.
Establish the invitation
Explain the station, show the total distance, then give the reader one direct action: begin descent.
Remove the familiar
Daylight decays, the telemetry becomes useful, and the first living particles appear.
Reward the scroll
Bioluminescence and jellyfish turn a long page into an environment instead of a stack of sections.
Reveal the human story
The station diagram, dive log, crew quote, and expedition prompt arrive only after the reader earns the bottom.
03 · Scroll-to-depth engine
Map content anchors to metres.
A simple linear formula would make the first 1,000 metres disappear almost instantly because the document sections do not have equal heights. Instead, the script builds piecewise breakpoints from each section's vertical position and its data-depth value.
BP = sections.map(section => ({
y: section.offsetTop - innerHeight * 0.42,
depth: Number(section.dataset.depth)
}))
depth = interpolateBetweenNearestBreakpoints(scrollY)This keeps the narrative and the telemetry synchronized. When the Midnight section enters the reading area, the depth display is also arriving near 1,000 metres.
The right-side HUD then derives pressure, temperature, remaining light, and the active zone from the interpolated depth. On mobile, the same information collapses into a bottom instrument strip so it never competes with the text.
04 · Procedural atmosphere
Use one canvas as the ocean.
A fixed Canvas 2D layer sits behind the semantic HTML. Each frame interpolates between six paired water colors, then adds only the effects appropriate to the current depth.
God rays
Five soft polygons drift across the surface and fade to zero by roughly 420 metres.
Plankton and marine snow
Small procedural particles move at different rates. Bioluminescent points react to the pointer without changing React state or forcing layout.
Jellyfish in world space
Their vertical positions are anchored to the document, so they pass through the viewport like animals in the water rather than decorative screen overlays.
Warm station glow
An amber radial light rises from below only after 9,200 metres, quietly forecasting human presence.
The mobile particle counts are lower and device pixel ratio is capped at two. Motion stops when the tab is hidden. Reduced-motion users receive a static ocean that still updates correctly on scroll.
05 · Production process
Three passes before release.
Composition and route architecture
- Selected Abyssal from five complete Claude concepts after desktop and mobile rendering.
- Placed the series at
/x, each site at/x/{slug}, and each explanation at/x/{slug}/guide. - Fixed the desktop depth rail so zone labels use document breakpoints instead of collapsing at the top.
- Replaced fixed viewport height with dynamic viewport height for stable mobile layout.
Product, narrative, and discoverability
- Added the portfolio index, homepage entry, canonical metadata, and working return paths.
- Added this guide so the experiment teaches a reusable method instead of presenting an unexplained artifact.
- Separated fictional world-building from real ocean facts in the final station note.
- Preserved the original visual language while making authorship and production roles explicit.
Responsive, accessibility, and production QA
- Verified desktop and mobile screenshots at the surface, mid-descent, and trench floor.
- Checked console errors, failed requests, keyboard focus, reduced motion, and route behavior.
- Ran type checking, linting, and a full Next.js production build.
- Deployed the same verified artifact that appears in the portfolio.
06 · Authorship
Built by models. Directed by a person.
This series is also a transparent record of AI orchestration. Credit is split by the work actually performed.
Claude Fable 5 created the fictional institute, the core art direction, copy, layout, canvas system, and initial responsive implementation.
Codex audited the unfinished batch, chose the release candidate, repaired it, built the portfolio and guide architecture, completed three QA passes, and shipped it.
Viron Gil Estrada commissioned the 25-site experiment, set the ambition, owns the portfolio platform, and defined the one-site-at-a-time shipping strategy.
No scraped inspiration image appears in this site. The visible environment is procedural Canvas 2D, CSS, SVG, typography, and original world-building.