Collection of Digital Clock Designs(clocks.dev)
clocks.dev
Collection of Digital Clock Designs
https://clocks.dev
51 comments
I love this. You might've just convinced me to get back into hardware/PCB and make something to put on my wall (with your blessing). I'm not sure if it's just because I'm on mobile, but I think it would be great if the pages that show the watch faces in action had a way to input a time to see what it looks like.
They are very nice! I'd love to see them 'in action' – I'd suggest something similar to what is on clocks.dev if you click in the bottom right corner on the 'timeline' feature: https://clocks.dev/clock/824d7b87d123
These are awesome
Came here to comment about Tokyoflash's designs, nice to see them here!
I made this clock recently just for fun. It's a digital clock made of analog clocks
https://mikespeed.com/clock
https://mikespeed.com/clock
Very creative visual joke. I love it when a funny idea is taken seriously and actually implemented. Nice work!
At this point it'd be worth creating an old-school webring [1] for all the HN clock enthusiasts. :)
The clock at: https://clocks.dev/clock/lock-screen
is kind of similar to one of my clocks: the Filling Digit clock [2], which fills the hollow digits with water from the bottom up to represent the seconds in a minute:
Another one that made the rounds here on HN was "Alphabetical Clock" [3] which is pretty amusing.
[1] - https://en.wikipedia.org/wiki/Webring
[2] - https://clocks.specr.net/filling-digits
[3] - https://news.ycombinator.com/item?id=47571401
The clock at: https://clocks.dev/clock/lock-screen
is kind of similar to one of my clocks: the Filling Digit clock [2], which fills the hollow digits with water from the bottom up to represent the seconds in a minute:
Another one that made the rounds here on HN was "Alphabetical Clock" [3] which is pretty amusing.
[1] - https://en.wikipedia.org/wiki/Webring
[2] - https://clocks.specr.net/filling-digits
[3] - https://news.ycombinator.com/item?id=47571401
"Number field" felt like the best spacial representation of a numeric clock (would need to be 24h to be perfect but that's a small tweak)
There are plenty of them in a more linear style, but the 12 columns design really works well IMHO. It's really easy to roughly guess the time at a glance.
https://clocks.dev/clock/number-field
There are plenty of them in a more linear style, but the 12 columns design really works well IMHO. It's really easy to roughly guess the time at a glance.
https://clocks.dev/clock/number-field
For some reason, the scrolling breaks about 2/3 of the way down. The scrollbar vanishes and I can't scroll anymore (Chrome 150.0.7871.115, Windows)
Same. Firefox 152.0.5, Windows 11
Same for me. Messing with browser scrolling is such a cardinal sin in web development
Thanks, should be fixed now, though there is some deeper performance issue I need to investigate.
Yep, that's working now. Thanks!
This is awesome! I made a Soroban (Japanese abacus) version, but I couldn't add it to the collection since I used css-based animations. Published here:
https://soroban-clock.netlify.app
The binary one in the bottom row seems to think that the digit to the left of of the 8s place is the 10s place and not, as is normal, the 16s place. Therefore 10 o'clock shows as "00010000" not "1010". Weird.
2300 hrs or 11pm shows as "00100011" which would be 35 o'clock. I guess the 32s place is a... 20s place? Somebody help me out here.
https://clocks.dev/clock/35bb1995bc5d
2300 hrs or 11pm shows as "00100011" which would be 35 o'clock. I guess the 32s place is a... 20s place? Somebody help me out here.
https://clocks.dev/clock/35bb1995bc5d
It's splitting the digits into four-bits per decimal digit.
2 3
0010 0011
23 -> 2 3 -> 0010 0011 -> 00100011better known as BCD, binary-coded decimal: https://en.wikipedia.org/wiki/Binary-coded_decimal
Love this! Thanks for making and sharing.
Worth a mention: John Maeda “12 o’clocks” https://codingtrain.github.io/12oclocks/
https://ems.andrew.cmu.edu/2016-60212/lectures/lecture-09-09...
https://www.moma.org/collection/works/102219
His 1996 work made me appreciate how time is expressed graphically. The smooth motion ones made me disfavor stop second analog clocks so much so that I’ve replaced all the movements in the clocks in our home with sweep second hands.
Worth a mention: John Maeda “12 o’clocks” https://codingtrain.github.io/12oclocks/
https://ems.andrew.cmu.edu/2016-60212/lectures/lecture-09-09...
https://www.moma.org/collection/works/102219
His 1996 work made me appreciate how time is expressed graphically. The smooth motion ones made me disfavor stop second analog clocks so much so that I’ve replaced all the movements in the clocks in our home with sweep second hands.
Some of these seem subtly off. For example, on the orange "number field" clock (https://clocks.dev/clock/number-field), you can't distinguish between 12:10 and 10:12. On the "word field" one (https://clocks.dev/clock/word-field), there are "X"es in lieu of unused characters, which makes the emergence of words a lot less mystifying than in the original "word clock" design this is based on. The "temporal exposure" one (https://clocks.dev/clock/temporal-exposure) has weird off-center bands in the blurred area. The "figure hands" one has text sticking out of the drawing area, etc.
In the "number field" clock, the hours are always along the top row only. 12:10 and 10:12 look different.
I think the one you are calling "figure hands"... if you mean the one where hands are numbers could just use better styling overall. Two colors, different sizes, better choice of font.
They have names in their URLs when you click. I meant this one: https://clocks.dev/clock/figure-hands
Around :15 and :45, the minute arrow is sticking outside the drawing region.
Around :15 and :45, the minute arrow is sticking outside the drawing region.
yeah, that's the one. Yep it doesn't seem as intended.
Thank you! This was a cool experiment, and I'd never used Svelte.
My rendition of the Voutilainen Vingt-8 ISO:
https://clocks.dev/clock/3b254b2789ec
My rendition of the Voutilainen Vingt-8 ISO:
https://clocks.dev/clock/3b254b2789ec
What a cool concept. Never heard of this before, but I’m sure it’d be easy to get used to. Now I want a watch like this.
Not a single 24-hour analogue face? That unexpectedly turned into one of the best reasons I keep carrying my smartwatch.
The nice thing is that anyone can easily add such design.
Created a simple 24-hour analogue face just now: https://clocks.dev/clock/c4a0aef0c379
Created a simple 24-hour analogue face just now: https://clocks.dev/clock/c4a0aef0c379
Midnight at the bottom! I really like this one: https://sunclock.net
Added one more with some day/light signaling: https://clocks.dev/clock/ea4059c74748
I'd really like an analog watch face for the lock screen of my iPhone.
Tim Cook would really like to sell you an Apple Watch.
I'd really like an analog watch face for the lock screen of my iPhone.
I really wish I could turn the clock OFF on my iPhone. The best I can do is to change the numbers to a language I can't read, and make the characters really thin and translucent.
I've read that in iOS 27, we'll at least be able to make it small.
I really wish I could turn the clock OFF on my iPhone. The best I can do is to change the numbers to a language I can't read, and make the characters really thin and translucent.
I've read that in iOS 27, we'll at least be able to make it small.
Please add: the alien clock from the Predator movie.
Please add this one (my design) https://euclid.tulv.in/
Tried my best at reproducing it: https://clocks.dev/clock/eee40ea8130b (but feel free to add your own real version of it! Anyone can add a clock via the top right button.
How much time did I just spend on clicking links and reading comments? I love that I have almost no idea.
What would be the best device to put any of these ones over the desk? And old phone? Maybe an esp32?
It might not be for everyone, but sticking ones active phone on a qi2/magsafe stand is great IMHO.
Time and notifications are on one place, so they're only noticed when you're trying to plan or organize your work. Switching to timer mode is seamless.
The desk is also less cluttered thanks to the verticality of it, and the phone stays visible from afar when taking small breaks, so you don't mind leaving it there.
Time and notifications are on one place, so they're only noticed when you're trying to plan or organize your work. Switching to timer mode is seamless.
The desk is also less cluttered thanks to the verticality of it, and the phone stays visible from afar when taking small breaks, so you don't mind leaving it there.
Really cool, but kinda laggy when loading.
Nice to see the Swiss railways clock works as it should :)
For some really quirky/weird/cool physical clocks, the British Museum channel has a few great videos:
Curious Clocks and Watches through time with Oliver Cooke | Curator's Corner S8 E1
https://www.youtube.com/watch?v=ywD5kngMuYM
Nice inspiration for world building, especially Steampunk!
Curious Clocks and Watches through time with Oliver Cooke | Curator's Corner S8 E1
https://www.youtube.com/watch?v=ywD5kngMuYM
Nice inspiration for world building, especially Steampunk!
I had one of these in my bedroom as a kid. Clearly I slept more deeply than I do now.
https://en.wikipedia.org/wiki/Rolling_ball_clock
https://en.wikipedia.org/wiki/Rolling_ball_clock
I've seen and used some variations of these in my Pebble watch.
They're cool for one day or two. But, in the end, I will always go back to some boring but more information-dense one (with battery charge, weather, heart rate, steps, etc).
They're cool for one day or two. But, in the end, I will always go back to some boring but more information-dense one (with battery charge, weather, heart rate, steps, etc).
lovely collection. Thank you!
My favorite digital clock was an LCD watch made by Fossil that had the digits spelled out in white Chinese characters on a cobalt background.
Not only did it show the characters, it slowly painted them on the screen. This wasn't a dot-matrix display. It was more like a 40-seg display. I've never been able to find a replacement, or even a photo of it online.
Not only did it show the characters, it slowly painted them on the screen. This wasn't a dot-matrix display. It was more like a 40-seg display. I've never been able to find a replacement, or even a photo of it online.
Sounds like a kanji version of their Big Tic line.
You can find old copies of the JR-1999/JR-8034/JR7978 on eBay but if you’re curious about fashion history (as I am) the backstory is more interesting[1].
You may be pleased to know that fossil is rebooting the big tic series of watches.
[1] https://www.instagram.com/reel/DVMOp_HDixh/
You can find old copies of the JR-1999/JR-8034/JR7978 on eBay but if you’re curious about fashion history (as I am) the backstory is more interesting[1].
You may be pleased to know that fossil is rebooting the big tic series of watches.
[1] https://www.instagram.com/reel/DVMOp_HDixh/
This is cool. I'd love to see a collection like this for date representations. Anyone?
I am not sure I want to use the API when it is not that hard to get the hands of a clock going with Javascript. I know I can do the latter, but the former poses a new learning challenge that doesn't guarantee a result.
My current SVG clock is modelled on a wall clock and it has the really small text that can normally found on a clock, for example 'Made in China' and 'Quartz'. I also have a fictional brand name, plus a bezel specified with 'pathLength="60"' and a dash array.
As a design exercise, a standard clock is interesting because you have to remember the stack order of the hands, and, despite looking at clocks many thousands of times, that detail requires a modicum of thought.
I think it is a good start to get a credible wall clock that tells the time at a glance before branching out into 'cool' clocks that put design before telling the time.
I now want to add a drop shadow that changes throughout the day, as if the clock is south facing, in the northern hemisphere, corresponding to my lat/lon.
This would be easy with three js because it could be modelled, along with the entire solar system, with the camera pointed at a 3D modelled clock, however, in SVG filters, could be a while.
Getting the hands to move is the easy bit, all considered. I really don't need another API for that, but I am not in the Svelte ecosystem.
My current SVG clock is modelled on a wall clock and it has the really small text that can normally found on a clock, for example 'Made in China' and 'Quartz'. I also have a fictional brand name, plus a bezel specified with 'pathLength="60"' and a dash array.
As a design exercise, a standard clock is interesting because you have to remember the stack order of the hands, and, despite looking at clocks many thousands of times, that detail requires a modicum of thought.
I think it is a good start to get a credible wall clock that tells the time at a glance before branching out into 'cool' clocks that put design before telling the time.
I now want to add a drop shadow that changes throughout the day, as if the clock is south facing, in the northern hemisphere, corresponding to my lat/lon.
This would be easy with three js because it could be modelled, along with the entire solar system, with the camera pointed at a 3D modelled clock, however, in SVG filters, could be a while.
Getting the hands to move is the easy bit, all considered. I really don't need another API for that, but I am not in the Svelte ecosystem.
https://watchface.netlify.app/
And I wrote about it here: https://72mena.medium.com/designing-watch-faces-using-svgs-a...