Five Hundred Clocks
tkgally.github.io · Experimental
The jury's review
Jury review of Five Hundred Clocks
A monumental self-contained web gallery rendering 500 distinct, functional clocks through pure procedural HTML5 canvas scripts.
Five Hundred Clocks is an extraordinary feat of generative web art and creative coding, packing 500 completely unique, synchronized, and functional timepieces into a single self-contained document. From astrolabes and word clocks to fluid dynamics simulations and Japanese calligraphy, each canvas tile presents a distinct artistic and mechanical interpretation of time. The global orchestration bar—allowing users to scrub time, speed it up to 3600×, or filter by category—gives the massive grid cohesive utility. While the pure canvas implementation means assistive technology cannot parse individual clock faces without added ARIA annotations, the sheer breadth of visual craft and engineering audacity makes this a landmark creative experiment.
What the jury loved
- Tremendous generative breadth with 500 distinct procedural time displays running simultaneously in canvas.
- Robust, intuitive global time-control chrome with playback speed multipliers, scrubbing, and category filtering.
- Zero external dependencies and instant loading from a single self-contained HTML architecture.
- Flawless dark grid art direction that lets the eclectic, creative timepieces shine without visual clutter.
For the winner
Wear the award.
Add the official badge to your site, case study or press page. It links back to this review — and readers who click through can see exactly why you won.
About the badges →Winner's badge
Add the badge to your site
Copy a snippet and paste it anywhere — it links back to your review.
<a href="https://websitedesignawards.com/site/five-hundred-clocks" target="_blank" rel="noopener">
<img src="https://websitedesignawards.com/api/public/badge/a75598b9-af7c-4b06-b543-f510d9ef73fd/svg?variant=dark" alt="Five Hundred Clocks — Site of the Day, Website Design Awards" width="240" height="88" loading="lazy" />
</a>[](https://websitedesignawards.com/site/five-hundred-clocks)
