TIDEWRIGHT — Nine Tides over Vellamar

▶ Play it in your browser

A 3D sandcastle simulator that runs entirely on the GPU. No engine, no libraries, no asset files, no build step — one WebGL2 context, ~7 000 lines of JavaScript and GLSL, and a beach that actually obeys the angle of repose.

Long before the maps, this coast was a country. It sank in one night — not from war, but because it forgot its own name. The sea keeps what it takes, yet keeps it badly: every tide it tries to hand the kingdom back, grain by grain, and every tide it thinks better of it and pulls the whole thing under.

A tidewright is someone who catches the grains before the water changes its mind.

Built in one prompt

The whole thing — simulation, renderer, nine art styles, lore, interface — came out of a single request to Claude Code:

"Create me a fully playable release-ready game. On GPU. Game about sandcastle simulator, where I can build things with sand and etc. I need it in 3D and not a voxel game. Make it with maximum effort, show me best what you can create. Use all your power, knowledge and make best graphics and best game design. Surprise me with graphics, lore and everything."

Everything after that was refinement in the same session. See the numbers at the foot of this file.

Play

In your browser: https://winchxyz.github.io/tidewright/

From a file: clone and double-click index.html. Every script is a classic <script src> tag, so it just runs from file:// with no server. (Only localStorage is unreliable there — saving is wrapped in a fallback and degrades to in-memory.)

From a server, if you want saves to persist:

node server.js

then open http://localhost:5173.

What it needs

WebGL2 with EXT_color_buffer_float and EXT_float_blend — any Chrome, Edge or Firefox from the last few years, on a GPU from roughly the last decade. Safari 16+ works. If float render targets aren't available it says so plainly rather than showing you a black screen.

It renders at your display resolution by default; drop Render scale in Settings if your GPU is having a hard time. There is no network traffic of any kind after the initial page load.

The game

There are three ways in.

Slack Water is the cozy one, and it's where the day lives. No tide, no clock, every mould and every toy unlocked, and a full sunrise-to-stars day cycle running over the shore — the sun comes up behind the dunes and goes down over the water, which is the entire reason anyone builds on a west-facing beach. Scrub the time with the slider, hold it where you like it, or let it run at slow, gentle or brisk. Two soft tides walk up to the edge of your work across the day and walk back again, and neither of them takes anything.

Endless Sand takes the arithmetic away. The pail is bottomless and the sea stays where it is, so you can build without first working out where the material is coming from. Everything else is the same beach — sand still slumps at its angle of repose, still needs wetting to stand, still sets as it dries. You are only spared the bookkeeping.

The Novena is the campaign: nine tides, each giving you a stretch of low water to build in and then taking it back, higher and rougher each time, from high morning at the first tide to full dark at the ninth. Between them the sun crosses the sky exactly once — the light in tide V is not a different preset, it is the same sun, lower.

Your score is Remembrance: sand you have raised above the coming high-water line, weighted by how well you packed it. Loose sand counts for almost nothing. The sea knows the difference and so does the scoreboard.

The one law

Dry sand cannot stand. Each grain has an angle it refuses to exceed — about 33° dry. Water bridges the grains and lets you go past vertical. Too much water and the bridges join up, the capillary squeeze disappears and it runs like soup. Then pat it: compaction is the other half of strength, and a damp packed wall will outlive an unpacked one by whole tides.

A readout follows your cursor with the moisture, the packing, how much sand is left above the hardpack, and a plain-English verdict — damp — good, now pat it, soaked — it will run, hardpack — nothing left to dig. Learn to read it and the rest of the game follows. A single line above the workbench always says the next useful thing.

The interface

Four places, not six.

• Left column — where you are in time. In the Novena: the tide, its clock, and what it asks of you, with a water gauge below it whose labels ride their own marks so the card is the diagram. In Slack Water the same slot holds the day instead — dial, clock, phase, scrub and speed.
• Top right — what you have. Remembrance, which counts up rather than snapping, and the pail.
• Bottom centre — what you are doing, stacked over your hands: the next instruction, the selected tool's settings, and the rack. Fold the settings away with Tab.
• At the cursor — what the sand is actually like. It flips above and to the left near the edges so it never lands on anything.

One surface, one radius, one type ramp throughout.

The pail

Sand is conserved to the grain. Digging fills your pail; pouring empties it. You are not making sand, you are moving the coast around — so dig your moat where you want a moat and the spoil becomes your keep. The classic beginner's mistake is a borrow pit behind the castle, which the sea then climbs like a stair.

The transfer is real, not bookkeeping. Sand you pour leaves the spout as tens of thousands of GPU-simulated grains that arc, fall, and only raise the ground where they actually land — pour off a ridge and the pile forms downslope, where the sand went, not under the cursor. The spade throws a visible sheet back over your shoulder as you drag it, and the mould lifts sand over its rim as it fills. Deposition is exact: each grain scatters its volume across precisely twenty-five texel centres, so what leaves the pail is what arrives.

And the pail remembers. Its wetness is the volume-weighted average of everything you have shovelled into it, so sand collected wet stays wet when you pour it — enough to stand steep the moment it lands. Left alone it dries in the sun at about a percent a second, and the pail chip in the HUD tells you where it is. Wet a patch before you dig it and you are carrying mortar; dig the dry back-beach and you are carrying dust.

There is close to two metres of loose sand over the hardpack across a working area some 36 m wide, which is deep enough that a proper moat cuts below sea level — and when it does, it fills with water on its own. Nothing scripts that; the sea surface simply renders wherever it is above the ground.

Which tool does what

Every tool is tagged in the interface with what it does to the amount of sand in the world, because that is the only real distinction between several of them:

Water and Drip are the pair people mix up. Water raises the moisture of sand that is already there so it can stand steeper; it builds nothing. Drip takes sand from your pail and dribbles it out already soaked, a blob at a time, to grow spires. Water changes what's there; Drip adds new.

The two sand-takers differ in what they leave behind: the Shovel bites wide and shallow and banks the ground's wetness into your pail as it goes, while Carve cuts a narrow, deep line for gates and stairs. Both throw the spoil where you can see it.

The moulds

Ten plastic shapes out of the bottom of the beach bag: round turret, square keep, gatehouse, star fort, ziggurat, spire, scallop, fish, crab, starfish.

They work the way they work on a real beach — in two halves:

1. Hold the mouse on damp sand. The mould scoops itself full; the meter fills and shows you how wet the sand going in is.
2. Let go, aim, click. The outline of the shape is drawn on the sand under your cursor, exactly as it will turn out — line it up, turn it with , and ., and press.

What comes out is precisely as wet as what went in. Turn out a dry mould and it collapses into a cone in front of you. Turn out a soaked one and it runs. Wet the ground before you scoop.

Adornments

Twelve of them: pennant, parasol, pinwheel, lantern, pail-and-spade, toy boat, scallop, starfish, driftwood, kelp, bottle, cairn. The pinwheel spins with the wind, the parasol and the sails and the kelp move in it, the lanterns actually light the sand around them, and all of them lean as the sand shifts underneath and go over when the water reaches them.

The sea

Waves break where the water goes thin, and they take the bottom of a wall first. Nothing here is knocked over; things are undermined and then fall. A moat spends a wave — filling a ditch is work, and the work comes out of the wave. A packed berm on the seaward side turns what's left. The surface film runs downhill and soaks in where it settles, and sand that saturates loses almost all of its angle of repose — so a moat draining landward doesn't wash your keep away, it quietly turns the ground under it to slurry, which is worse.

Nine looks

Settings → Look. Same simulation, same sun, same castle — only the shading changes, and it changes live. All nine are one uStyle uniform threaded through the terrain, water, sky, prop and composite shaders. Not nine renderers; nine ways of separating the same light.

The same castle, nine times:

Salt & Light	Bucket & Spade	Marram
Ordnance	Felt & Flannel	Rockpool
Tin Toy	Sōsaku Hanga	Midwinter

Controls

Tools — Shovel, Pail, Pat, Water, Mould (hold to fill, click to turn out), Rampart (drag to raise a wall to your starting height), Carve (press on the level you want and drag: everything you cross comes down to it, so a stroke across a wall leaves a gateway), Level, Drip (grows the knobbled spires only a beach can make), Adorn. They unlock across the first five tides; Slack Water and Endless Sand give you all of them at once.

One honest limit worth stating up front: the sand is a heightfield — one height per column — so it can make notches, gateways, moats and overhanging crenellations, but it cannot make a tunnel, a cave, or an arch with sand over the top. Nothing in the game fakes it. A doorway here is a slot cut from the top down, which is how real crenellations work too.

Photo mode gives you the sun on a slider, exposure, focus and aperture, and writes a PNG.

What's actually running

Everything expensive is on the GPU. There is no mesh file, no texture file and no third-party code anywhere in this project.

Sand in transit is real. Pouring and dripping don't edit the ground — they throw sand into the air. Each grain is a GPU particle carrying an exact volume and the moisture it left with; it falls, it collides with the heightfield, and when it lands it is drawn as a 5-pixel point into a scatter target that the next simulation step folds into the ground. A 5-pixel point covers exactly 25 texel centres whatever its sub-pixel position, so an even 1/25 share returns precisely the volume it was carrying: measured loss is 0.04%. That matters, because the pail meter is derived from the total sand in the field and would drift otherwise.

The consequences aren't scripted. Pour dry sand and it builds a cone at the angle of repose while you watch. Drip very wet sand onto the same spot and it stands in a near-vertical spire on a dry base spreading at 33° — two materials, one solver. Sand in the air belongs to neither the pail nor the ground, so the pail meter accounts for it separately while it's falling.

And it sets. Water is what lets you build the face; packing is what holds it up, and packing doesn't evaporate. Sand that dries out of a wet state gains compaction rather than losing strength — the bridges between the grains go, but the grains stay locked where you pressed them and the surface crusts. So a turret you mould at noon is still exactly as tall when it has dried bone dry: measured, a 1.9 m tower goes from 87% moisture to zero and loses 0.000 m. Loose dry sand still can't hold anything — pour a heap from a dry pail and it slumps half a metre in eight seconds. Packed and dry is strong; loose and dry is not, which is the actual distinction on a real beach.

Digging stays instant. Responsiveness matters more there than spectacle.

The ground is a continuous heightfield — not voxels — solved in a fragment shader over ping-ponged RGBA32F targets at up to 640². Per cell: sand depth, moisture, compaction, surface water film. Each step does an eight-neighbour avalanche relaxation against a variable angle of repose:

repose(moisture, compaction):
    dry            →  ~33°     a slope, never a wall
    damp + packed  →  past vertical
    saturated      →  it runs

Every transfer between two cells is computed from an antisymmetric expression evaluated identically from both sides, so sand is conserved exactly — verified over 12 000 steps with zero drift. That is what makes the pail meter honest, and it is why an undermined wall collapses on its own rather than because something scripted it.

Waves don't have a separate erosion rule. Breaking water simply fluidises the sand — it drives the local repose angle toward zero and raises the relaxation rate — and undermining, slumping and offshore bars all fall out of that.

The water is a Gerstner sum with real shoaling: amplitude gains as the bottom comes up, crests get depth-limited, and the excess becomes foam. The grid is exponentially warped around the camera, so the same ~740 k vertices give 15 cm of detail at your feet and still reach the horizon. The simulation and the renderer call the same GLSL wave function, which is why the erosion lines up with the water you can see.

The sky is a raymarched Rayleigh + Mie atmosphere baked into a lat-long LUT once a frame. Everything reads that one texture — sea reflections, ambient on a sand wall, aerial perspective on the headland — so when the sun goes down the whole world goes down with it.

The sand shader does Oren–Nayar diffuse (sand is the roughest thing on a beach), wetness that darkens albedo and drops roughness, heightfield horizon AO, procedural ripples, shell grit, heavy-mineral ribbons in the swash zone, caustics under standing water, and a sparse mica glint field — the reason real sand sparkles and CG sand usually doesn't. Steep faces switch to a wall projection so moulded towers don't smear.

The moulds are one function, mouldShape(), living in the shared GLSL: coverage and height over a unit disc. The simulation stamps with it and the sand shader draws the ghost outline under your cursor from the very same code, which is why the shape you line up is exactly the shape that turns out — there is no second, approximate preview to drift out of sync.

Also: 6 000 particles integrated with transform feedback and colliding with the heightfield; PCF shadows; a bloom pyramid, sun shafts, ACES with a split grade, grain and FXAA; twelve procedurally generated beach toys that lean as the sand moves under them and go over when the water reaches them — the pinwheel spins with the wind, the parasol and sails and kelp move in it, and the lanterns light the sand around them for real; and an entirely synthesised soundtrack — surf built from three bands of filtered noise (body, break and hiss) driven by the real swash phase, wind, gulls, and a modal pad through a generated reverb.

And crabs. Eleven of them, wandering the beach in bursts and sitting still between them, walking sideways because that is what crabs do. Their legs run off a single gait phase that only advances while they are actually moving, so they stop dead rather than treading air. They ride the heightfield like everything else, so they will walk up over a rampart you have just raised. They keep to the band above the waterline, which means a rising tide herds them up the beach ahead of it without anyone having written a retreat — and if you bring a tool near one, it bolts.

Measured on an RTX 4070 Laptop at 1600×900 internal, High preset: ~5–6 ms a frame. Low / Medium presets scale the simulation, shadow map, water grid and render scale for weaker hardware.

Files

index.html          markup, all overlays
css/ui.css          interface
js/core.js          math, GL wrapper, async PBO readback, storage
js/glsl.js          shared GLSL: noise, the beach profile, the wave field, BRDF
js/sky.js           atmosphere LUT + background (sun, moon, stars, clouds)
js/sim.js           the sand — avalanche, moisture, tools, AO, metrics, picking
js/terrain.js       sand surface renderer
js/water.js         the sea
js/props.js         procedural adornments, gulls and crabs
js/particles.js     GPU particles (transform feedback)
js/post.js          bloom, shafts, DOF, tonemap, FXAA
js/audio.js         synthesised everything
js/content.js       the nine tides, the tools, the codex — all the design knobs
js/game.js          camera, input, tide state machine, scoring, interface
server.js           31-line static server, optional
docs/               the screenshots in this file, nothing the game loads

Everything a designer would want to touch — tide heights, durations, swell, sun angles, objectives, tool rates, the codex — is in content.js and the brush block of sim.js.

Codex

Nine entries from The Tidewright's Primer unlock as you go, plus two hidden ones. They are the manual, in character.

You will be told that a tidewright works to preserve something. That is a misunderstanding, and a comfortable one. Nothing you make here survives. What a tidewright preserves is the shape — the fact that this arrangement of grains was possible, was chosen, was made by somebody on purpose on an ordinary afternoon. The sea can have the sand. It has never once managed to take the fact.

Hold the shape. Then let go of it. Then do it again.

The numbers

TIDEWRIGHT was written in one continuous session with Claude Code (Opus 5), from the single prompt quoted at the top of this file. For anyone curious what "one prompt" actually costs:

Ninety-five percent of that total is prompt cache reads. The whole codebase gets re-read on nearly every turn, which is exactly what lets a project this size hold together inside one conversation — and why the generated figure (2.6 M) is the one that reflects the actual writing.

Licence

MIT — see LICENSE.