Sand, drawn glass, and real physics.
Arena is a waisted glass whose sand isn't animated — it's simulated. Every grain is a cell in a falling-sand automaton, finding its own way down and settling into a cone at a true angle of repose.
The concept
Arena is a fictional object: an hourglass that measures nothing but itself. There's no product, no timer set to your meeting — just a column of sand, a neck five grains wide, and gravity. It's built for anyone who finds a running egg-timer more honest than a progress bar.
The page's single job is to make duration tangible: you watch grains meter through the neck, pile up, and occasionally let go in a small avalanche. A tally counts the settled grains and the elapsed minutes; flip the glass and the count restarts from the very sand you just poured.
Palette
Warm, low-contrast, meditative — the colours of bone glass and desert sand in raking light. The bright brass is reserved for lines and marks; the small text rides a dedicated dark ink so body copy clears 4.5:1.
Type
Newsreader sets the display and prose — a warm, literary serif with optical sizing, so the large weights stay open and the small stay legible. Its italic carries the emphasis in the headline. Spline Sans Mono handles every number and label: the tally, the clock, the eyebrows — tabular, quiet, instrument-like.
The signature
The hourglass is a hand-rolled falling-sand cellular automaton on a 118×190 grid, not a physics library. Each cell is empty or sand. On every relaxation pass the grid is scanned bottom-up: a grain moves straight down if it can, otherwise slides diagonally into an empty cell — but only if the space beside it is also clear. That single rule is enough to produce a cone at its angle of repose, and to make it avalanche the moment the slope gets too steep.
The glass silhouette is drawn separately — two triangles meeting at the neck, clipped to fill the interior, stroked in brass, framed with plates and posts. The sand is rasterised into a grid-resolution buffer and drawn with image-smoothing off, so the grains stay crisp and discrete. The neck is only five cells wide, so it meters the flow into a trickle. Because it's all hand-rolled canvas, the page never fights your scroll.
The readout is honest: grains settled is a live count of sand below the neck, fallen % is that over the total, repose is measured from the actual cone — peak height over half its base — so it drifts as the pile builds and drops when it slides. The clock runs on a delta accumulator clamped against tab-visibility jumps. When the top empties it flips itself; the sand you piled becomes the sand that falls.
Iteration log
Pass 1 — Craft
Set the type scale and the warm resting palette. Two things caught here drove the whole build: the diagonal slide rule originally let grains tunnel through the glass wall at the neck (added the side-cell-clear check, which also cleaned up the avalanches); and the repose readout pinned at its ceiling because it measured the base one row at a time — switching to the pile's full horizontal spread made it track the real ~45° slope and relax as the cone widened. Tightened headline tracking and the readout grid.
Pass 2 — Depth
Enriched the signature: eight sand tones hashed by position give the falling column a faint shimmer as grains pass through. Added the brass frame — plates and posts — so the glass reads as a real object, and a flip animation that rotates the whole instrument through 180° with the grid refilling at the halfway point. Second-read detail: the repose readout visibly ticks down each time the cone avalanches. Added an optional filtered-noise sand hiss, gated behind a gesture.
Pass 3 — Hardening
Verified 375px (nav stacks, glass caps to 344px and never overflows), the reduced-motion path (a deeper warm-start renders a settled cone as one static premium frame, no loop, flip re-renders once), focus-visible rings, DPR capped at 2 with a resize relayout, and the rAF paused on document.hidden with the physics accumulator capped to three steps so a resumed tab doesn't fast-forward. Slowed the neck so the resting glass reads as a growing cone rather than a filled bulb, and removed a dead double-paint of the bottom brass plate (the Chanel rule).
Technique summary
- Hand-rolled falling-sand cellular automaton (Canvas 2D, typed arrays) — no external physics library.
- Grid-resolution ImageData buffer, drawn with smoothing off for crisp grains.
- Clipped-path glass silhouette with brass frame; 180° flip via canvas rotation.
- Live measurement of settled count and angle of repose from the grid itself.
- Clamped delta-accumulator clock; rAF paused on tab hide; DPR ≤ 2 with resize.
- Optional WebAudio bandpass-noise sand hiss, gesture-initialised.
No frameworks, no build step, no raster images — one self-contained HTML file.