Sand Timer
The Sand Timer is a countdown timer that treats time as something you watch rather than something you read. Instead of digits ticking down, you choose a picture, and the timer rebuilds it out of falling sand. Grains drop from the top of the screen one after another, each landing in its exact spot, and your image slowly assembles from the bottom up — like an hourglass where the sand piles into a picture instead of a heap. The pace is tied precisely to your chosen duration: when half the image has formed, half your time has passed, and the moment the final grain lands, time is up.
How to use it
Open the timer, pick a duration, and select an image. You can use one of the built-in preset images or upload your own — a photo, a logo, a drawing, anything. Press start and the sand begins to fall. A digital readout and a grain counter run alongside the canvas if you want exact numbers, and you can pause and resume whenever you like. The timer even survives a page reload mid-countdown and picks up where it left off. Uploaded images are processed entirely in your browser and never sent to a server; saved presets live in your browser's local storage.
What it's useful for
I built it because ordinary timers create a strange kind of pressure — you glance over, do the mental math, and lose your train of thought. A picture gradually completing tells you "roughly how much time is left" at a glance, without inviting you to compute anything. It works well as a classroom activity timer, a presentation or lightning-talk clock, a pomodoro-style study timer, and a timer for kids who can't read a clock yet — anyone can see how much of the picture is still missing. There's also a quiet reward at the end: instead of an alarm, you get the finished image.
How it works under the hood
The whole thing is hand-written vanilla JavaScript on an HTML5 canvas — no framework, no build step. When you load an image, it's downsampled into a grid of grains, each keeping the color of the pixel it came from, and the grid resolution scales with your duration so longer timers get finer, more detailed sand. Each grain is assigned a precise landing time spread evenly across the countdown, then falls from the top of the canvas with an eased acceleration to its target spot. Bottom rows land first, which is what makes the image appear to pile up naturally. The clock is computed from real elapsed time, independent of rendering, so a slow device never makes your countdown run long.
Small details
The timer keeps a lifetime counter of every grain that has ever landed on your device, which turns out to be a strangely satisfying number to watch grow. Transparent pixels in uploaded images are skipped, so logos and cut-out images keep their silhouette instead of forming a square.
Try it here: Sand Timer. Found a bug or have an idea for a feature? Get in touch.