Showcase 04 · Falling sand
Decay
Below is a small, real web page. Let it decay: it crumbles pixel by pixel into sand that trickles to the floor and piles up into dunes. Press and drag with your mouse or finger to dig in it. “Restore” sends every grain back to its place, and the page is whole and usable again.
New at the studio
Ideas that last.
We build websites and apps that load fast, last long and feel good. This page is real HTML: you can read it, click it and have it read aloud.
Project
Frozen Glass
Design system, web and app, all of a piece.
The live demo needs JavaScript and WebGL 2. The sample page above is complete without it; the explanation below describes the decay.
- Grains
- –
- Cell updates/s
- 0
- Frames/s
- –
- State
- Intact
- Simulation
- WebGL 2 · GPU
How it works
When it decays, the script redraws the sample page with Canvas 2D from its real layout: surfaces, borders and every word at its position, in the page's own fonts and colours. No screenshot service is involved. Every covered cell becomes a grain of sand that remembers its home coordinate.
The graphics card computes the sand as a cellular automaton. Every pass splits the grid into blocks of 2 × 2 cells (a Margolus neighbourhood) whose offset alternates from pass to pass. All blocks compute at the same time without getting in each other's way, and no grain is ever lost. The real page stays in the document the whole time and screen readers read it unchanged; the animation is purely visual.