Living grain · real-time WebGL2
A headline held together by nothing but tens of thousands of grains. Push it over, pour more in, tip the whole world on its side. Then ask it to rebuild, and every grain finds its way home.
This browser cannot run WebGL2, so here is the sand at rest. Open the page in a current browser to play with it.
Drag through the letters to knock them down. Press and hold still to pour grains. Keyboard: arrow keys knock a random letter, P pours, S shakes, T tilts, R rebuilds, 0 starts over.
The stage is a grid of tens of thousands of cells. A resting grain owns one cell. Each frame, every grain checks the cell below it, then the two diagonals, and moves if one is free. That one rule is enough to build dunes with a real angle of repose.
A grain with nothing under it leaves the grid and becomes a particle with its own speed. It falls, drifts and tumbles until it touches something, then settles back into the nearest free cell. Your finger throws grains the same way.
The headline is drawn once into a hidden map. Grains that land inside it are locked in place until something knocks them loose. Rebuild reads the map, finds every empty place and sends a grain to each one.
Yes. Every grain you see is one cell in a grid or one particle in the air, and each one is moved every frame. The counter under the stage is the true number, read from the simulation four times a second.
The headline is drawn once, in the page's own font, onto a hidden grid the same size as the simulation. Every cell inside a letter becomes a place a grain can be locked into. Rebuild sends loose grains to the empty places along curved flight paths.
A resting grain only slides if the spot diagonally below it is free. Each material tunes that rule: glitter runs two cells sideways for a shallow slope, snow grips unless there is a real drop, so its piles stand steep.
The page is plain HTML with a poster image. The simulation starts a moment after the page has loaded, uses fewer grains on phones, lowers its own resolution if frames run long, and stops completely when it is scrolled out of view.
Yes. Sand is a website template from Apex Flow Digital: the source code, this page, and one config file where you set the word, the font, the materials and how the sand behaves.