Build guide · an honest account

How this site
was made.

The concept. UMBRA is a fictional WebGL studio, and the pitch was simple: let the shader be the whole site. One raymarched dreamscape runs full-screen behind everything, and the interface is only allowed to whisper over it in glass. Scrolling the page is scrubbing the sun: dusk, deep night, first light.

The techniques, honestly

There is no three.js here and no build step. A raw WebGL2 context draws one fullscreen triangle, and a single GLSL fragment shader does everything you see. The terrain is a ridged fbm heightfield treated as a signed distance field and raymarched at up to 120 steps. Fog is nine samples of height-weighted fractal noise, tinted toward the sun with a pow(sunDot, 6.0) scatter term. The page's scroll position feeds a uScroll uniform that blends three hand-tuned palettes (dusk, deep night with stars, dawn) and moves the sun's elevation. The mouse eases into a uMouse uniform for parallax. Everything else is plain CSS: Michroma and Archivo from fonts.bunny.net, backdrop-filter glass panels, an SVG-turbulence film grain, IntersectionObserver reveals. prefers-reduced-motion freezes the camera and renders single frames on demand, and a frame-time monitor drops the internal render scale once if your GPU struggles.

Three passes, three critiques

The site was built in a loop: serve locally, screenshot at desktop and 390px mobile, read the screenshots, list at least five concrete faults, fix them, repeat.

Prompting an agent to build this

You could hand an AI agent something close to this and get a cousin of this site:

"Build a one-page site for a fictional WebGL studio. Raw WebGL2, one fragment shader: raymarched fbm heightfield, nine-tap volumetric fog lit toward a glowing orb sun, and a scroll uniform that blends dusk, night, and dawn palettes. Add eased mouse parallax. UI floats over it in restrained glass panels: charcoal, bone-white, one ember-orange accent, Michroma headers. Respect reduced motion. Screenshot it, criticise it harshly, fix it. Do that three times before you call it done."

The last sentence is the one that matters.