I built a digital clock for my neighbor with Alzheimer a few years ago. It was a web app with an analog clock and it would show Morning / Afternoon / Evening / Night on the side.
I felt quite proud of myself, since she often got confused about whether it was 6am or 6pm on her analog clocks at home. (Alzheimer's can bring a loss of the sense of time.)
But while she thought it was a great idea, every time I came back, she had turned off the dedicated tablet we set up for the purpose
I ended up just buying her an Alzheimer's clock — a 24 hour clock with pictures indicating the time of day, for $15 or so. That one stayed where we put it!
Author can be found in the settings avialable via the cog in the bottom right hand corner, which also allows you to select the timecard you want, and alter visual settings.
I need to find the time to do a bit of research into whether it's possible to use a web page as a screensaver because I'd love to use one of these for that.
Very clean and polished! I love how smooth the seconds hand move.
I work in an environment where we look at the time across many different timezones around the world. A couple of feature requests if you are ever in the mood:
1. Make it possible to specify the timezone.
2. Make it possible to create a grid of clocks, each with different timezones.
3. Persist the grid/timezone state in the URL so links can be easily shared.
There is also iFrame support, you can easily now make own local html file with multiple clock on different timezones. Quick also to reload after reboot, since static local file to open. If you end up using this in work, I would love to hear more about it, because then my project would have someone using it:)
(You can put a `TZ="Wherever"` variable at the start for different timezones, and those that don't like the seconds ticking can pass e.g. 0.01 instead of 1 to the -update option).
Right? If you want to see something pretty amusing, there was a fairly popular HN post a while back where a bunch of LLM models were continuously (every minute) asked to one-shot an analog clock.
The content is provided by a Raspberry Pi 4, and these Javascript/CSS/SVG clocks can be quite taxing. Especially a smooth running seconds hand often causes visual stuttering. Chrome had the best FPS I recall.
If anyone knows of other large circular displays, please post here.
The new BMW Mini has a gorgeous 24cm circular OLED display, but that's not generally available, OEM only [1][2].
Thank you for your reply. Sunclock looks nice!
I miss analog clock on cars, digital clocks are all around. Maybe I'm old because I read analog clock better than digital, somehow it's easier to visualize time from that. Young generation reads and likes digital clocks more. Maybe digital clocksimulator alternative also who knows...
Can you set it to ticks instead of continuous running of the seconds clockhand That would be great. The vast majority of analog clocks have a ticking clockhand for the seconds, if any at all (can you make the seconds optional?).
The only clocks I know of with such a motor are station clocks, like the Swiss one mentioned already, or the German variant (same manufacturer). But these have a twist: the minute clockhand does not run continuously, but also ticks. The seconds are running a little bit faster until the clockhand is in the upper position, then waits for a signal from the main clock. Only then the minute clockhand jumps one minute and the seconds are starting again.
I like that you can switch the second-hand to "tick" or continuously move. I have multiple analog clocks in my house and since most of them are battery-powered quartz, the second hand ticks. But, I have one that's from the 60s and needs to be plugged into the wall; that one has the second hand continuously move!
I have a (fairly recent) continuous movement clock from Ikea, battery-powered and most certainly inexpensive (they don't sell expensive ones and I wouldn't get that even if they did).
EDIT: I think it's $15 TJALLA[0] and it mentions "No disturbing ticking sounds since the clock has a silent quartz movement."
I appreciate the straightforwardness of this. If I could make one request, it would be to support more of a "tick" mode instead of the continuous second hand motion. It doesn't even have to actually make noises, I just like the visuals of the clock hand starting and stopping every second. I don't know if there's a more formal name for this in Clock World
If you're looking for more to add: ticking second hands have momentum. How about having the ticking hand go beyond the proper place by a degree, then snap back into proper position?
You're literally describing the worst thing about the quartz watches. The best of them (aka most expensive) go to really great lengths to not have any momentum. Why would you want to have it when not needed?
It's as horrible as I expected it to be, great work!
Consider other hideous features, like having the second hand miss the marks because of its "weight" - so a bit forward at 3, a bit back at 9, gradually disappearing toward 6 and 12.
That weight really makes it look like our kitchen clock, but sure it will not look like expensive clock. That feature sure will divide opinions I think.
This is something I vibecoded to learn my kid the clock. I think this is a very good use of ai coding, stuff that is for visualization and temporary learning.
This is actually pretty cool. It's just a clock, nothing more, nothing less. Animations are smooth. I actually prefer these analogue clocks over digital as I seem to be able to plan ahead better with it.
I like it. Simple, well-designed, smooth. It's nice everything fits in a single HTML page with no external dependencies. The inline style and script is human readable, which is becoming rare these days.
Beautiful! One small thing on the iPhone using Safari; it would be nice to have the clock vertically centered. Now it’s near the bottom half of the screen. Looking great otherwise!
May I suggest that we keep it as clean as it now, and maybe have something like the domain `/advanced` for those who want more features? (If OP has time to implement them)
Very nice. My only suggestion would be to slightly differentiate more the hour and minute hands (so that at a quick glance, someone, perhaps even a child) can immediately distinguish between them. (i.e., hour hand slightly shorter/fatter)
The PTB (national metrology institute of Germany) provides a similar clock for decades. It is one of the few displaying the real time, not your computer’s time. The difference (if any) can be shown.
I like seeing the vanilla JS. Clean and simple. I don't think that vanilla JS is always the best approach, but I think that for this case it certainly is.
Listened my wife talk about her job, she works as preschool teacher and she has talked about clocks etc. Well then I thought that I could do minimal web page with analog lock, SURE clocksimulator.com domain cannot be free....
I have done within year few sites what are not taken any interest. Who knows what comes to mind next and if anyone likes that. I have bigger macOS-memory-benchmark(ARM64 assembly routines etc) project on my GitHub what I have been developing almost a year now. I believe that will continue nicely to the future.
This domain I paid up to 2036, so we will see clocksimulator.com long in the web. Just released v1.0.15 of it, introduced local storage for saving settings if user so wants - that will follow my goal to keep site as clean as possible.
I love open source and not fan of todays webpages filled with all kind a bloat.
Thank you for coming back to commenting, this thread has been very exiting me to follow and see how people like the page. This brings me memories from the 1994 when I programmed small program to Amiga, then shared it in the BBS and saw it in monthly most download list. This HN Show has brought me close to that awesome feeling again.
Im not in anyway UI specialist. Your site looks smooth, I like dark theme, a lot of information is available with howto-videos. Continue building it like you visualize it and know how it should be!
I built a digital clock for my neighbor with Alzheimer a few years ago. It was a web app with an analog clock and it would show Morning / Afternoon / Evening / Night on the side.
I felt quite proud of myself, since she often got confused about whether it was 6am or 6pm on her analog clocks at home. (Alzheimer's can bring a loss of the sense of time.)
But while she thought it was a great idea, every time I came back, she had turned off the dedicated tablet we set up for the purpose
I ended up just buying her an Alzheimer's clock — a 24 hour clock with pictures indicating the time of day, for $15 or so. That one stayed where we put it!
That was very kind of you - both to want to solve her problem and to admit that your solution you put effort into wasn't the best one for her.
Thank you for sharing this.
Very, very cool.
In a similar vein, somebody posted a version of the old timecard clocks from BBC and ABC channels in the 70s and early 80s that they'd built:
https://www.mubd.net.au/tv-history/tv-clocks.html#bbc1-1981
Author can be found in the settings avialable via the cog in the bottom right hand corner, which also allows you to select the timecard you want, and alter visual settings.
I need to find the time to do a bit of research into whether it's possible to use a web page as a screensaver because I'd love to use one of these for that.
Thank you! Awesome video from old times.
Love how clean it looks.
Related, I made a clock with a moire pattern (10 years ago now) and still love coming back to it.
The hands all spin with css transitions and I remember there was a Safari bug where if I zoomed in, the rotation would reset itself
https://psychedelic-clock.surge.sh
Wow that was a trip for my eyes, nice! Thank you for sharing.
Very clean and polished! I love how smooth the seconds hand move.
I work in an environment where we look at the time across many different timezones around the world. A couple of feature requests if you are ever in the mood:
Great feedback for the OP. I would also add, Can you make the text not selectable?
Thanks for the feedback, its done.
You can now select timezone with URL parameters in IANA timezones: ?tz=America/New_York ?tz=Europe/London ?tz=Asia/Tokyo
Wonderful! Thanks for the quick turnaround.
There is also iFrame support, you can easily now make own local html file with multiple clock on different timezones. Quick also to reload after reboot, since static local file to open. If you end up using this in work, I would love to hear more about it, because then my project would have someone using it:)
Clock now also moves very slowly in screen, in dark mode it can reduce screen burn.
Thank you! Very good idea, I look forward to implement URL timezone parameters to get it on different zones without it affecting to UI in any way.
Really nicely done. I usually settle for
(You can put a `TZ="Wherever"` variable at the start for different timezones, and those that don't like the seconds ticking can pass e.g. 0.01 instead of 1 to the -update option).Brits of a certain age will recall (and might appreciate) the clock faces available at https://625.uk.com/tv_logos/flash2.htm#clocks too.
Thank you! I have always loved UK clock faces, thank you sharing that link.
Nice job. Consider adding a option to turn on a "tick sound" as the second hand moves.
Also maybe see if you can get yours linked to clockfaceonline.co.uk
They have a bunch of analog clock visualizations. I particularly like the magical themed one:
https://www.clockfaceonline.co.uk/clocks/magical
https://www.clockfaceonline.co.uk/analogue-clocks.php
There is so many nice clocks. I didn't even know analog clocks are so popular!
Right? If you want to see something pretty amusing, there was a fairly popular HN post a while back where a bunch of LLM models were continuously (every minute) asked to one-shot an analog clock.
https://clocks.brianmoore.com
Great job, really well done.
Also cool: https://sunclock.net
I enjoy running clocks on this 5" inch circular touch screen IPS display from Waveshare: https://www.amazon.com/dp/B0C14CZ2GG.
The content is provided by a Raspberry Pi 4, and these Javascript/CSS/SVG clocks can be quite taxing. Especially a smooth running seconds hand often causes visual stuttering. Chrome had the best FPS I recall.
If anyone knows of other large circular displays, please post here.
The new BMW Mini has a gorgeous 24cm circular OLED display, but that's not generally available, OEM only [1][2].
[1] https://www.mini.com/en_MS/home/new-family/a-digital-quantum...
[2] https://www.bhtc.com/en/news/bhtc-entwickelt-erstes-rundes-o...
Thank you for your reply. Sunclock looks nice! I miss analog clock on cars, digital clocks are all around. Maybe I'm old because I read analog clock better than digital, somehow it's easier to visualize time from that. Young generation reads and likes digital clocks more. Maybe digital clocksimulator alternative also who knows...
Love the correct time in the favicon. Nice touch.
You found it!
I didn't even notice! Nicely done!
Can you set it to ticks instead of continuous running of the seconds clockhand That would be great. The vast majority of analog clocks have a ticking clockhand for the seconds, if any at all (can you make the seconds optional?).
The only clocks I know of with such a motor are station clocks, like the Swiss one mentioned already, or the German variant (same manufacturer). But these have a twist: the minute clockhand does not run continuously, but also ticks. The seconds are running a little bit faster until the clockhand is in the upper position, then waits for a signal from the main clock. Only then the minute clockhand jumps one minute and the seconds are starting again.
An example can be seen here: https://de.wikipedia.org/wiki/Bahnhofsuhr#Technik
I'm more of a fan of the smooth motion. Its mesmerizing.
there is now toggle button to select either way.
Same and also I consider it more accurate to sweep, but that's just me I guess, you hardly see it these days.
Most mechanical watches unwind smoothly, ticks are typically due to a powered quartz crystal.
Thank you for the feedback. I see if I add toggle to select tick/sliding.
Thank you, looks perfect now :)
I like that you can switch the second-hand to "tick" or continuously move. I have multiple analog clocks in my house and since most of them are battery-powered quartz, the second hand ticks. But, I have one that's from the 60s and needs to be plugged into the wall; that one has the second hand continuously move!
I have a (fairly recent) continuous movement clock from Ikea, battery-powered and most certainly inexpensive (they don't sell expensive ones and I wouldn't get that even if they did).
EDIT: I think it's $15 TJALLA[0] and it mentions "No disturbing ticking sounds since the clock has a silent quartz movement."
[0]: https://www.ikea.com/us/en/p/tjalla-wall-clock-silver-color-...
I have a TROMMA [0], which I like because you can see the wall through the numbers :)
[0]: https://www.ikea.com/us/en/p/tromma-wall-clock-white-3055707...
Thank you for your nice comment!
I appreciate the straightforwardness of this. If I could make one request, it would be to support more of a "tick" mode instead of the continuous second hand motion. It doesn't even have to actually make noises, I just like the visuals of the clock hand starting and stopping every second. I don't know if there's a more formal name for this in Clock World
Added ticking and liked it so much its default mode :)
If you're looking for more to add: ticking second hands have momentum. How about having the ticking hand go beyond the proper place by a degree, then snap back into proper position?
You're literally describing the worst thing about the quartz watches. The best of them (aka most expensive) go to really great lengths to not have any momentum. Why would you want to have it when not needed?
because it's fun
I'm gonna test this out how it looks, not promising anything!
It's as horrible as I expected it to be, great work!
Consider other hideous features, like having the second hand miss the marks because of its "weight" - so a bit forward at 3, a bit back at 9, gradually disappearing toward 6 and 12.
That weight really makes it look like our kitchen clock, but sure it will not look like expensive clock. That feature sure will divide opinions I think.
Here's a request to not have ticking :) Time is flowing constantly and seconds are a human invention.
There is toggle on top left to choose between tick / sliding seconds.
Wow thanks! This is great
Features added to clocksimulator after posted it here:
- Screen burn-in protection(use dark mode)
- Tick movement for seconds hand
- Mechanical movement for seconds hand
- Timezone URL parameters
- Numbers on the clock cannot be selected with mouse
- Iframe embedding feature
Most of these are suggestions what came up here from you all, thank you:)
This is something I vibecoded to learn my kid the clock. I think this is a very good use of ai coding, stuff that is for visualization and temporary learning.
https://utforsk.github.io/clockeroo/
That was nice thing to do, did it help your kid to learn?
Excellent, maybe an addition for protection from display burn-in would be nice. I dont know. Congrats.
Burn-in is sure possible, I will look possibilities maybe move clock little bit etc. Thank you for you comment!
This is actually pretty cool. It's just a clock, nothing more, nothing less. Animations are smooth. I actually prefer these analogue clocks over digital as I seem to be able to plan ahead better with it.
I like it. Simple, well-designed, smooth. It's nice everything fits in a single HTML page with no external dependencies. The inline style and script is human readable, which is becoming rare these days.
I wanted this to be small and clean, open source and nothing to hide.
Beautiful! One small thing on the iPhone using Safari; it would be nice to have the clock vertically centered. Now it’s near the bottom half of the screen. Looking great otherwise!
Thank you! Good catch, I will look to fix it.
May I suggest that we keep it as clean as it now, and maybe have something like the domain `/advanced` for those who want more features? (If OP has time to implement them)
Few toggles I approve on front page because of auto-hide. Good idea of /advanced for future things.
Very nice. My only suggestion would be to slightly differentiate more the hour and minute hands (so that at a quick glance, someone, perhaps even a child) can immediately distinguish between them. (i.e., hour hand slightly shorter/fatter)
Thank you for the feedback. You are right, hour hand could be shorter and maybe little bit thicker. I will look on to it.
The PTB (national metrology institute of Germany) provides a similar clock for decades. It is one of the few displaying the real time, not your computer’s time. The difference (if any) can be shown.
There is also a time announcement if needed.
https://uhr.ptb.de/
That looks nice!
Nice!
I like seeing the vanilla JS. Clean and simple. I don't think that vanilla JS is always the best approach, but I think that for this case it certainly is.
It's like https://clocks.brianmoore.com, but good
Thank you :)
Somehow related: https://en.wikipedia.org/wiki/Swiss_railway_clock
Something related to cultural appropriation, but it reminded me of Canary Wharf (London) clocks, https://canarywharf.com/artwork/konstantin-grcic-six-public-...
Want to carry that on your wrist, or hang to your wall?
You're covered (down to the stalling second in some models): https://mondaine.com/
Clock took some inspiration of our kitchen clock.
I laughed, but then I saw the l. Nice job though...
Could you tell more about "but then I saw the l" when you mean by that?
Im happy if I got you smiling :)
Kudos. It really is clean. And the domain name is easy to remember.
If I use any analog clock simulator in the future, it will be yours.
Thank you :)
This looks really clean, excellent job!
Thank you for the nice words :)
It takes current time from client browser and shows it. No adjustments or alarms.
Not analog enough. I want to hear the ticking sound!
Pretty cool idea, i wish it had that nostalgic ticking sound of seconds.
Looks really neat. I used to use a very similar screensaver back in the day.
Kudos.
Thank you! Yes back in the day we used to have all kind a clocks as timesavers.
Nice but I think to Clock UI is too big
Very smooth. Is the code open source?
Seems to be simple enough (just plain JS not minimified, and CSS), that you can just look at the source view-source:https://www.clocksimulator.com/
Good ol' days spirit
Thank you. Code can be viewed at https://github.com/timoheimonen/clocksimulator
Thanks! I was keen to find out how you prevented screen sleep and was interested to find out about wakeLock.
Very nice!!
Thank you :)
iframe support added, can be found under Info button.
wow bro. how did you even come up with the idea. I also like the fact that there is a toggle that you can switch if you want screen on. pretty smart
Listened my wife talk about her job, she works as preschool teacher and she has talked about clocks etc. Well then I thought that I could do minimal web page with analog lock, SURE clocksimulator.com domain cannot be free....
what other ideas do you have in your mind to do after this one
I have done within year few sites what are not taken any interest. Who knows what comes to mind next and if anyone likes that. I have bigger macOS-memory-benchmark(ARM64 assembly routines etc) project on my GitHub what I have been developing almost a year now. I believe that will continue nicely to the future.
This domain I paid up to 2036, so we will see clocksimulator.com long in the web. Just released v1.0.15 of it, introduced local storage for saving settings if user so wants - that will follow my goal to keep site as clean as possible. I love open source and not fan of todays webpages filled with all kind a bloat.
Thank you for coming back to commenting, this thread has been very exiting me to follow and see how people like the page. This brings me memories from the 1994 when I programmed small program to Amiga, then shared it in the BBS and saw it in monthly most download list. This HN Show has brought me close to that awesome feeling again.
wow bro, it seems that you are in this game a long time now. keep up the building, I am always here to help and support you!
Thanks! I really appreciate the support. You keep building also, visited your site and looked great!
any change you want to suggest. no hard feelings just want to improve
Im not in anyway UI specialist. Your site looks smooth, I like dark theme, a lot of information is available with howto-videos. Continue building it like you visualize it and know how it should be!
thanks a lot. will try my best to improve step by step
Better than 90% of the slop that gets ladled into the front page, bravo. The world needs more Clock Simulator-like projects.
Thank you very much!
[dead]