Hourglass countdown timer

At a glance

Why the site begins with an hourglass

The origin story of the hourglass skin, from the people who drew it.

The hourglass was drawn first because it is the honest shape of a countdown. Every other skin on this site is a metaphor — a sun sinking, a candle shortening, a tank draining — but sand falling through a narrow neck is time passing, no translation needed. It set the bar every later skin had to clear: if you glance at the screen from across the room, you know how long is left without reading a number.

It also set the bar for how the sand should behave, and that took the most care of any skin. The sand in the upper bulb is not a flat shape losing height: it holds a crater that is deliberately a dish rather than a funnel, so the remaining sand reads as a band hugging the glass walls. The crater never sits dead centre — it wanders as real piles slump — and avalanches creep along its surface instead of sitting still. In the lower bulb the falling column lands with a splash, kicks up a faint dust of lit grains, and builds a mound whose crest keeps shedding loose grains down its sides.

The grains themselves are drawn as short motion streaks, because grains that fall should look like they fall, not float. A pre-rendered soft dot makes the cheap trick possible: stamping one sprite thousands of times costs far less than thousands of per-particle gradients, which is what keeps the scene smooth on a five-year-old classroom laptop.

Around the glass, the room is barely there: a near-black background, a breathing amber glow behind the bulb, and a slow dust field with three depth cues — parallax, size, and drift — that you can switch off when you want the hourglass utterly alone. Brass was the first frame choice because warm metal against warm sand photographs well on any projector; walnut and obsidian followed for wood-panelled studies and very dark home offices.

How the scene moves

• Idle. The upper bulb is full, the column holds still, and the ambient glow breathes slowly behind the glass.
• Running. The pour starts: grains streak down the neck, the crater above wanders and slumps, and the mound below climbs with a lit crest. The dust field drifts with your mouse unless parallax is off.
• The last stretch. The upper bulb thins to a wall-hugging band; the thread of sand brightens and stutters as its arch keeps collapsing, and bead clusters ride the column down.
• Zero. A soft glassy chime rises as the last grains land. The readout flips to +mm:ss overtime so overtime stays visible, and the hourglass waits, all sand below, until you reset it.

Make it yours

The sliders button in the bottom control row opens Scene settings. Choices are stored in your browser and survive reloads; nothing is sent anywhere.

Two shared panels live in the same place for every skin. Sound picks the finish chime (or “match the skin”), sets the volume, and adds an optional tick for each of the last ten seconds. Display moves the countdown readout — bottom, top, centre, bottom-left or bottom-right — and recolours it: follow theme, warm white, white, gold, ice blue or coral.

Copy-paste links

The sound it makes

At zero, three sine tones rise through a soft glassy arpeggio — the audio twin of the last grains coming to rest. Like everything in timer.cool, the sound is synthesized by the browser at the moment it plays: no audio files, nothing to download. The Sound panel can swap in a bell, digital beep, wood block or alarm, add a tick to each of the last ten seconds, or you can mute with M.

On a projector or TV

Press F and every control disappears — brass and sand become the whole screen, which is the point: the timer is for the room, not just for you. While a timer runs, the page holds a wake lock so the display does not dim mid-session.

The keyboard map: Space start/pause, F fullscreen, R reset, M mute, +/− give or take a minute while running, L repeat. Two honest limits: on an iPhone the ringer switch silences web audio, and aggressive battery-saver modes can override the wake lock on some devices.

Who the hourglass is for

Questions