The Lighthouse — A Beam Sweeping a Stormy Sea, Stereo-Panned Thunder
You stand inside a lighthouse on a cliff during a storm. The Fresnel lens spins at 6 RPM. The amber beam ray-marches through volumetric fog and lights up rain droplets in its path. Lightning. Stereo thunder. Foghorn.
What this is
You're sealed in a tiny brass-and-wood lamp room 24 meters above a stormy sea. The central Fresnel lens spins at exactly 6 RPM. The amber beam, rendered as an additive cone mesh with 3D fbm noise, slices through volumetric storm fog and briefly illuminates rain droplets in its path, distant sea stacks, and the foam-flecked Gerstner waves crashing on rocks below. Lightning every 10 seconds detonates somewhere on the horizon — the screen pops white, the entire stormscape silhouettes for a frame, and stereo-panned thunder rolls in delayed by the speed of sound. Cycle beam color with space. Sound the foghorn with H.
Why this is mind-blowing
Cycle the beam to red and you have a horror film. Cycle it to cyan and you have Annihilation. The same scene reads as 5 different movies depending on one parameter. That's what good set-piece engineering looks like — and it dropped out of one paragraph of prompt.
Build a first-person scene inside a stormy lighthouse in Three.js. The
lamp room at the top: a rotating beam lights up volumetric storm clouds
outside via a ray-marched cone-of-light shader. Below, real Gerstner
waves crash on jagged rocks; foam erupts on impact. Lightning every ~10
seconds silhouettes the entire scene; thunder follows after delay
proportional to flash distance, panned in stereo by flash position.
Press space to switch the beam color. H sounds the foghorn.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- An additive-blended cone mesh with 3D fbm noise drifting along its axis is 95% of the way to true ray-marched volumetrics, at a fraction of the cost. The eye reads it as light cutting fog.
- Stereo-panning thunder by the lightning flash's screen position is one of those micro-touches that makes a scene feel real. Without it, thunder is mono and feels like a sound effect.
- Cycling beam color (white → amber → red → green → cyan) turns the same scene into 5 different films. The set-piece infrastructure is more reusable than you'd think.