How this
sky was built

Concept & inspiration

An owl is a creature of the night sky, so the site became an observatory session: a living WebGL heaven, frosted-glass observation panels floating over it, and the agency's real projects charted as Noctua, the Owl — an actual discontinued 19th-century constellation, resurrected here with six stars, one per live project. Everything is labeled the way a plate archive would label it: OBS-codes, epochs, right ascension and declination. The scientific flavor is decorative; the projects, mottos, and copy are the real thing.

Palette & type specimen

Unbounded is a variable font; the whole 200–900 weight axis is used — hairline coordinates, mid-weight headings, and a 900-weight hero with the word OWLS knocked out to a teal-webkit-text-stroke outline.

Techniques

• Starfield — 4,200 points in one tree-shaken Three.jsPoints mesh across three depth shells. A custom vertex shader sizes each star by distance (150.0 / -mv.z) and twinkles it with a per-star phase attribute; the fragment shader draws a soft additive halo around a hard core, so bright stars bloom naturally.
• Aurora — a single large plane behind the stars running a fragment shader: five-octave value-noise fbm warps a second fbm lookup into slow curtains, masked vertically, tinted teal→violet along the warp. Two ribbon passes at different seeds give depth.
• Camera — scroll position maps to a slow descent and a 3.5° roll; pointer position is lerped (0.045) into rotation offsets so the sky lags dreamily behind the cursor. An idle sine drift keeps the sky alive even when nothing moves.
• Performance — pixel ratio capped at 1.75, powerPreference: 'low-power', rendering paused on visibilitychange, and the whole module skipped for prefers-reduced-motion or missing WebGL — a static CSS sky (layered radial-gradient stars, twinkle-free) sits underneath as the fallback.
• Constellation chart — the six stars are HTML anchors positioned by percentage over an SVG figure. Lines use pathLength="1" so the on-scroll draw is a single dash-offset transition per line, staggered by CSS. Hover or keyboard focus opens each star's telescope observation card (pure CSS :focus-visible/:hover); screen readers get the full record via visually-hidden text; touch and small screens get an observation-log list instead.
• Observation panels — backdrop-filter: blur() glass over the live canvas, with teal/violet corner reticles drawn by pseudo-elements, plus an SVGfeTurbulence grain wash and vignette over the whole page.

Assets: none. Every visual is procedural — shaders, SVG, and CSS. No image prompts were used.

The iteration passes

• Pass 1 — full build, then screenshot review found the hero readout colliding with the nav on mobile, observation cards clipping at the chart's right edge, and the aurora reading too faint at 25% scroll. Fixed edge-aware card flipping, boosted ribbon luminance, rebalanced hero spacing.
• Pass 2 — complexified: shooting stars added to the sky loop, a nebula haze layer behind Noctua, spectral-class cells given their band gradients, chart given plate labels and grid arcs more presence.
• Pass 3 — nitpick sweep: type tracking on coordinate labels, focus ring consistency, mobile chart height, footer rhythm, contrast checks on dim text.