Design guide · Direction 1 of 10
A submersible descent through the ocean's light zones, built for Nomadic Owls. This guide documents the concept, the cited references, the design system, and exactly how the signature effects work.
Nomadic Owls says it "sends beautiful things to the Internet." ABYSSAL takes that sentence literally and inverts the geography: if the agency's work arrives on the surface web, then the place it comes from must be deep. The site is a dive. Scroll position is depth — you enter at a sunlit teal surface, sink through the twilight zone where the services ignite as six bioluminescent organisms, drift past project "specimens" in the midnight zone, and reach the seafloor at 4000 m, where the contact section fires a signal beam back up to the surface.
The conceit does honest work. Deep-sea biology is a ready-made metaphor for an agency that prefers dark-mode craft over loud self-promotion: in the abyss, nothing is lit unless it makes its own light. Services, projects, and the CTA all obey that rule — everything glows from within, nothing is lit from outside. The submersible HUD (ticking depth meter, pressure readout, zone label, porthole brackets) frames the whole experience as an instrument you are piloting, which keeps a narrative site usable: you always know where you are and how far is left.
The intent was atmosphere without gimmickry — every decorative system (rays, marine snow, grain) is driven by the same single scroll-progress value, so the page feels like one physical medium rather than a stack of effects.
Cormorant — luminous elegance
Display · weights 400 / 500 + italic · @fontsource/cormorantAlbert Sans — instrument legibility
UI & body · weights 400 / 500 · @fontsource/albert-sans
One content column: min(1160px, 100% − clamp(2.5rem, 8vw, 6rem)).
Vertical rhythm uses viewport-relative clamps (clamp(4rem, 9vh, 7rem)
per section) so the dive keeps a consistent sink-rate across screen sizes. Zone
divider hairlines mark 200 m / 1000 m / 4000 m and double as section separators.
All glows are cyan at 1× intensity and violet at ~0.6× — violet never leads.
A single normalized scroll progress p ∈ [0,1] drives everything.
Depth is p × 4200 m; the readout eases toward the true value with
lerp(shown, target, 0.14) per frame so digits "tick" like an
instrument. Pressure is 1 + depth × 0.1003 bar. The water column is
four RGB stops (surface teal → abyss black) interpolated in JS and written to
--bg-top/--bg-bot on a fixed gradient layer.
Five skewed linear-gradient beams in a fixed layer, masked to fade downward, each
swaying on its own 13–19 s alternate ease. Their container opacity is
calc((1 − p × 2.4) × 0.85) — sunlight is gone by roughly 40% of the
dive, exactly when the "twilight zone" divider passes.
One <canvas>, ~150 particles with a per-particle layer factor
z. Each frame they drift upward (speed × z × (1 + p × 1.6) —
you sink faster at depth) and receive scroll-delta parallax
(−Δscroll × z × 0.25). devicePixelRatio is capped at 2; the loop
pauses on visibilitychange and via IntersectionObserver. Grain is an
inline SVG feTurbulence tile in overlay blend, opacity
0.04 + p × 0.11.
Services are inline SVG line-drawings of six organisms. An IntersectionObserver
adds .lit: strokes transition to bioluminescent cyan/violet with
drop-shadow glows over 0.8 s, staggered 90 ms per card. Projects use
per-card CSS custom properties (--scale, --blur) for the
Floema-style depth field; hover/focus zeroes the blur and restores scale.
Under prefers-reduced-motion: reduce the rAF loop never starts: no
particles, no ray sway, no jelly drift, no beam pulse, and the decorative video is
paused on its poster. Depth/pressure/zone still update statically on scroll, and
all ignition content is shown immediately.
Four assets, generated centrally and copied (never regenerated) into this site.
Prompts verbatim from shared/assets/manifest.json:
“Deep sea bioluminescent jellyfish photographed in pitch-black ocean water, translucent bell glowing cyan and violet from within, fine trailing tentacles with pinpoint lights, marine snow particles drifting, extreme darkness surrounding, scientific deep-sea expedition photography, no text”
Model: GPT Image 2 (via Higgsfield CLI)“Long chain siphonophore glowing electric teal in absolute black deep ocean, delicate repeating segments like a living string of lanterns, faint violet accents, sparse drifting particles, ultra dark background, deep sea documentary photography, no text”
Model: GPT Image 2 (via Higgsfield CLI)“Deep ocean floor hydrothermal vent scene in near-total darkness, faint shafts of blue-green light from above, silhouetted rock chimneys, scattered tiny bioluminescent organisms like stars on the seabed, moody abyssal atmosphere, deep-sea submersible photography, no text”
Model: GPT Image 2 (via Higgsfield CLI)“Slow drifting bioluminescent plankton particles in pitch black deep ocean water, tiny cyan and violet points of light floating gently upward, subtle water movement, seamless calm loop, extreme darkness, macro underwater footage”
Model: Kling (kling2_6, via Higgsfield CLI)npm create astro@latest with output: 'static'.npm i @fontsource/cormorant @fontsource/albert-sans; import only the used weights (400/500 + one italic).ffmpeg -i in.png -c:v libwebp -quality 82 out.webp) and compress the Kling loop (ffmpeg -i in.mp4 -an -vcodec libx264 -crf 30 -vf scale=1280:-2, ≈0.6 MB).p → CSS variables), then hang rays, snow, grain, and colour off that one value.npm run build.Designed & built by Claude (Anthropic) for Nomadic Owls. One of ten directions — index at owls-index.pages.dev.