Here is the smallest version of the idea first, the shore cut in half like a cake. Drag to pour sand; the sea sends a wave every few seconds.

https://codepen.io/stillwet/pen/vExrzMd

Five layers of numbers

The island is a 96 x 96 grid. Each cell holds five heights, each a Float64Array of n * n:

• rock: never moves on its own, only grows when lava sets.
• sand: slides when a slope is too steep.
• water and lava: flow.
• silt: sand that fast water carries.

The ground a fluid flows over is the sum of the layers under it. Lava flows over rock and sand; water flows over rock, sand and lava. So one step runs lava first, then water on top of what the lava left:

for (let i = 0; i < N; i++) base[i] = rock[i] + sand[i];
pipes(w, lava, base, w.lR, w.lL, w.lD, w.lU, p.gLava, p.dampLava, dt);
settle(w, lava, w.lR, w.lL, w.lD, w.lU, dt, null);
for (let i = 0; i < N; i++) base[i] = rock[i] + sand[i] + lava[i];
pipes(w, w.water, base, w.wR, w.wL, w.wD, w.wU, p.g, p.damp, dt, still);
carrySilt(w, dt);
settle(w, w.water, w.wR, w.wL, w.wD, w.wU, dt, w.speed);
erode(w, dt);
slump(w);
heat(w, dt);
sea(w);

Water: four pipes per cell

The flow is the virtual-pipe model: every cell has a pipe to each of its four neighbours, and each pipe keeps a flux from the last step. Each step, the flux grows by the difference in surface height and loses a little to damping:

const h = base[i] + fluid[i];
let r = fR[i] * damp + dt * g * (h - base[i + 1] - fluid[i + 1]);

A pipe never pushes backwards (negative flux is clamped to zero; the neighbour's own pipe handles that direction). And a cell can't send more than it has: if the four outflows add up to more than the cell's water, all four are scaled down by the same factor. That one line is what keeps the total water exact, step after step:

const out = (r + l + d + u) * dt;
if (out > fluid[i]) { const k = fluid[i] / out; r *= k; l *= k; d *= k; u *= k; }

Then settle moves the water: inflow from the four neighbours' pipes pointing in, minus the cell's own outflow. Because the flux carries over between steps, water has momentum: a wave runs up a beach and slops back instead of just levelling out.

Lava is the same function with a lower gravity (2.5 against 10) and heavier damping (0.92 against 0.98), so it creeps.

Sand: an angle of repose

Sand doesn't flow, it slumps. For each neighbour, if the sand top is higher by more than the talus (the steepest slope sand holds), a fifth of the excess moves down that way:

const talus = water[i] > 0.05 ? p.talusWet : p.talusDry;   // 0.35 wet, 0.8 dry
const ex = h - top(j) - talus;
if (ex > 0) { m[k] = p.slump * ex; total += m[k]; }

Wet sand holds a slope less than half as steep as dry sand. That is the whole game in one line: a dune you pile on the beach stands, and the same dune melts when the wave reaches it. The moves are collected in a separate array and applied after the loop, so the order cells are visited in doesn't bias which way sand falls.

Silt: sand that rides the water

Fast water picks sand up. The capacity of a cell's water grows with its speed (the flux through it), and below capacity the water erodes the sand under it; above, it drops silt:

const cap = p.kc * Math.min(speed[i], 4);
if (silt[i] < cap) { const e = Math.min(sand[i], p.ke * (cap - silt[i]) * dt); sand[i] -= e; silt[i] += e; }
else { const d = p.kd * (silt[i] - cap) * dt; silt[i] -= d; sand[i] += d; }

Silt moves on the water's own pipes: the share of a cell's water that leaves through a pipe carries the same share of its silt. No second velocity field, and a river cuts its bed and builds a fan at its mouth by itself.

Lava: it sets

Each step a little lava turns into rock, much faster where water touches it, and hot lava boils that water off:

const c = Math.min(lava[i], dt * (p.cool + (wet ? p.coolWet : 0)));
lava[i] -= c; rock[i] += c;
if (lava[i] > 1e-3 && wet) water[i] = Math.max(0, water[i] - p.boil * dt);

So the player can pour water on a lava flow to build a rock wall exactly where the wave will hit. That comes from four lines of physics, not a scripted rule.

The sea and the wave

The four edges of the grid are held at sea level: each step, an edge cell's water is set so its surface sits at the level. A wave is that same rule with one edge lifted for a few seconds. The pipes do the rest: the lifted edge pushes water inland, the wave runs up the cove, and anything below its crest floods.

Keeping a phone at 60 fps

• The sim runs in a Web Worker. The page sends the time that passed and what the hand does; the worker runs fixed steps of 0.05 s (three simulated seconds per real second) and answers with the layers.
• No allocation per frame. The worker posts the layers as Float32Arrays and transfers their buffers; the page sends the same buffers back with its next message, and the worker fills them again.
• One draw. The land is one grid mesh in WebGL2 with no vertex buffer (a vertex is its index), and the heights come from a texture read in the vertex shader. A browser with no WebGL2 gets the same camera on a plain 2D canvas.

On a Sony Xperia 10 II, a mid-range phone from 2020, the island holds 59 frames a second while you play.

Play it

The first island is free in the browser, phone or desktop: Still Wet. There is also a rising sea, a new one each day, the same for everyone.

Every number in the sim was tuned by eye. If you build something on pipes and talus, I'd like to see it.