MONOLITH

A living 3D ritual in your browser. Nine stones rise from a black mirror as auroras shift and dawn breaks—all generated live, with no images or models.

Comment

Inspiration

Neolithic henges were instruments as much as monuments — aligned to the sun, built to be stood inside. I wanted a website that felt like standing inside one: a slow, ceremonial descent instead of a UI. The palette (obsidian, ember, bone) and the inscriptional typography come from carved Roman capitals and the blue hour just before sunrise — the moment when dawn leans on the horizon and won't quite fall.

What it does

MONOLITH is a single continuous, scrubbable 3D experience. You descend by scrolling into a circle of nine standing stones set on a black mirror. Dawn burns along the horizon but never breaks; an aurora breathes overhead. As you move through the timeline, the buried stones rise one by one. Click a standing stone and it rings a note on a pentatonic scale. Keep going and two outer rings of stones wake on their own as the circle begins to hum — then the whole formation fires a shaft of light to the sky and holds a single chord.

Everything in the scene is generated in the browser at runtime: the sky, the aurora, the runes carved into each stone, the reflections, and every sound. There are no image textures and no 3D model files in the project.

How I built it

  • Three.js (r160) on WebGL2 for the scene, with a 16-point camera path along a Catmull-Rom curve driving the whole journey from one scrubber value.
  • Custom GLSL shaders for the sky dome (gradient + dawn band + sun bloom + a procedural star field), the aurora (5-octave fbm curtains), the finale light beam, and the ground haze.
  • Reflector (three/addons) for the real-time planar reflection of the black mirror floor; RoundedBoxGeometry for the 46 stones across three rings.
  • A post-processing stack: UnrealBloom plus a hand-written grade pass doing chromatic aberration, split-toning, vignette and film grain, then OutputPass.
  • The Web Audio API for all sound: a generated ambient drone (detuned oscillators through a slowly swept low-pass), an algorithmic convolution reverb, a plucked pentatonic tone per stone, and an arpeggiated finale chord.
  • A custom virtual scrubber replaces the scrollbar entirely — wheel, touch, keyboard and a draggable rail all feed one number, and the scene chases it at a capped constant speed so a hard fling can never skip a beat.
  • Plain HTML/CSS for the overlays, with Cinzel, Cormorant Garamond and JetBrains Mono from Google Fonts.

Challenges I ran into

  • Making the scroll feel good with no scrollbar: early versions were either too fast (you missed the stones rising) or laggy. The fix was a velocity-capped chase with the target tethered close to what's on screen, so it always feels connected but a full pass still takes at least 20 seconds.
  • Getting the black mirror to read as "a still, patient mirror" rather than a cheap chrome floor — tuning the Reflector tint, fog density and a haze sheet so distant reflections fade into the dawn instead of doubling the image.
  • Keeping the finale from re-triggering while the camera rewound back to the title, and making "walk it again" actually return you to a blank title screen instead of leaving the ending text stuck on top of the scene.
  • Bloom and tone mapping order in the post stack, so only emissive runes and the sun glow bloom — not the whole frame.

Accomplishments that I'm proud of

  • The entire thing is procedural — no assets to download, loads fast, and the source is small enough to read in one sitting.
  • The moment the outer rings wake and the beam climbs the sky genuinely makes people stop and say "wow."
  • The scroll replacement: it feels like a deliberate instrument, not a hijack.

What I learned

  • How much art direction lives in the post-processing pass, not the geometry.
  • fbm noise in GLSL is enough to fake an aurora convincingly.
  • Web Audio can carry a whole soundtrack with zero files if you treat oscillators and a noise-impulse convolver as your instruments.

What's next for MONOLITH

  • A day/season cycle so the henge can be re-lit at different hours.
  • Letting visitors "compose" — the sequence of stones you strike becomes a short shareable melody + seed.
  • A WebGPU path for a denser particle field and softer shadows on mobile.

Built With

Share this project:

Updates

Submission history