Paint it, then watch it settle
Eight materials on a grid of 90,000 cells. Each one follows a rule about where it would rather be — down, sideways, up — and everything else is a consequence. Sand finds its own slope. Water finds its own level. Oil will not stay underneath it. Fire goes where it can reach and nowhere else, and water stops it.
Start from a scene
Four scenes, each built so one interaction is unmissable. They cost nothing and need no account — they are the fastest way to see whether the rules are doing what this page claims.
What it is costing
There is no model here and nothing to bill, so what this app spends is your machine's frame budget and — only if you save a scene — a little storage. Both are shown rather than hidden.
Sign in to see how much storage your saved scenes use.
Take it with you
A snapshot is a PNG of the box as it stands. A scene file is the grid itself — drop one back onto the canvas to load it, on any machine, signed in or not.
Saved scenes
Scenes saved here live on your SkillSafe account, not in this browser, so they follow you to another machine. Saving is optional and free.
How it works, in one page
Every cell holds one material. Sixty times a second the grid is swept from the bottom row upward and each cell is asked where it would rather be. That order is not cosmetic: sweep from the top instead and a falling column empties in a single frame, because each grain gets moved again as the sweep catches up with it.
One rule does most of the work. Every material has a density, and a cell may move down into anything lighter and up into anything heavier. Sand is 60, water 30, oil 20, smoke −30. Nothing in the code says "oil floats" — water sinking through oil is what puts the oil on top, and the same comparison drops sand through both and floats smoke up through them.
Fire is the only material that reads its neighbours and rewrites them. It spreads solely to cells it is touching, which is why a gap stops it and a water channel is a genuine firebreak. Water beside a flame very likely puts it out each frame — but not certainly, and that gap is deliberate: make it certain and fire and water can never be adjacent long enough for water to boil, and steam disappears from the simulation entirely.
Two details keep it honest. Each row's horizontal sweep direction flips every frame, because scanning left-to-right every time makes every diagonal slide resolve the same way and sand piles visibly lean. And a cell that has already moved this frame is marked with the frame number, so it cannot be picked up a second time by the same sweep.
Speed comes from not doing the work. The grid is diced into 16×16 blocks and a block is stepped only if something changed in or beside it last frame, so a settled scene costs almost nothing and the cost tracks the moving area rather than the grid area. Worst case — the entire grid in free fall, every block awake — measures about 1.3 ms per frame at 400×225, against the 16.7 ms a 60fps frame allows.