The Beach — Real Ocean Physics in a Browser Tab
A 200m × 200m beach with Gerstner waves, Rayleigh sky, foam where waves break, sand that erodes at the tideline, and a 24-hour sun cycle. One HTML file, one prompt.
What this is
A vibe-coded ocean. Gerstner waves give you real wave shape (peaked crests, flat troughs — not just sin curves stacked). A Rayleigh-style sky shader handles dawn through dusk through night. Foam appears where waves steepen and break. Sand subtly erodes at the breaker line over time. Camera slowly orbits around the scene like a drone shot. The whole 24-hour day cycles every minute.
Why this is mind-blowing
You wrote one paragraph. The model produced a real-time shader pipeline that simulates wave physics most film VFX houses charge for. The constraints (no textures, single file, browser-runnable) make it more impressive, not less.
Build a single-file HTML page that simulates a real beach in WebGL. Use
Gerstner waves for a 200m × 200m water surface, with a procedural sand
floor that erodes where waves break. Add a diurnal cycle so the sun
position, sky color, and water reflectance change over a 24-hour loop
sped up to 1 real minute = 1 in-sim day. Add foam where waves break.
Slow auto-orbit camera by default. No textures from disk — generate
everything procedurally in shaders. Must be beautiful within 1 second
of page load.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- Gerstner waves are 4–6 traveling sine components summed at each vertex. The model knows the formula by heart — you just describe the scene.
- Reusing the same sky function inside the water shader for reflections means the water automatically matches the sky as it changes. One source of truth = no mismatch.
- Auto-orbit camera + immediate first render = the demo is selling itself within one second. No 'click to begin.' No loading screen. The first frame is the pitch.