Back
Published 2026.08.26
I realize this is a fairly dry subject for most readers, but a lot has changed in the past few months, so I wanted to give an update on where the Watch Simulator from a few posts ago currently stands. It's gotten a ton more features since its inception and I'm quite proud of it, even if it's still a bit janky and serves no practical purpose. I crafted it with love and care. That is to say, I threw it messily together in a single Javascript file with no documentation or tests and just futzing with things until they worked. For the most part. In some browsers. That's my definition of "vibe coding" and no language model can ever take it away from me.
I added the virtual watch to my Web-Based Watchbox to live alongside all my real watches. Originally, I had the simulator load in an iFrame on the details view, but that proved to cause performance issues for some people when they loaded it up. Probably this was due to the large size of the images, which I have since rectified, but it seemed unwise to unexpectedly launch a viewer of my watch database into a live application, so now that page just links to the simulator, instead of embedding it.
I added a bunch of user customization options. Some of these existed in its original incarnation, but many of them are new since the watch sim first went live. You can change the dial, the hands, the strap, the case, and the bezel, among other things.
In case you missed it, I added a preset browser. This was a serious quality of life upgrade, as many of the components are meant to go with specific other ones into one cohesive design, and this makes it simple to get an entire, relatively "good" looking watch quickly. It's also a way around the terrible color picker on mobile browsers; I got frustrated with not being able to make my favorite designs on mobile due to limited options. The user can now choose between a growing number of different total watch designs.
To make this easy for me, there's import/export functionality for presets behind the scenes. I thought about surfacing that to the user, and I guess I still might, but I wasn't sure if it would be worth the effort; after all, who's going to bother copy-pasting or downloading/uploading a JSON just to save their favorite watch design? This is a static site and I don't want to go through the trouble of creating a real backend or database for it. I could store user presets in local browser storage, but that would lead to the potential to lose creations you thought were saved. So for now the only presets are ones I added manually.
A natural result of adding presets, I needed a good way to take screenshots to add them to the preset browser without all the extra UI fluff. Hence, "photo mode", which superimposes the watch over an image of a slot in my watch box.
This simulator was created to showcase my unique idea for a rotating shutter complication on a watch, so it was designed with that in mind. However, I decided after a while it would be fun to allow the user to make normal 3-hand watches too. Now there's an option to create a solid dial, which covers up the shutters. I also added the option to create a date window, though I didn't implement a "quick set" using the movement crown. It still only has a single position for time setting, and if you want to change the date, you'll have to go all the way around. I don't think that's likely to bother anyone since the watch syncs to the user's current time, but it does reduce the "realism" of the simulation. Perhaps it would be more accurate to refer to this as a "customizable web-based watch-shaped clock app", since it doesn't truly simulate any of the inner workings of a watch.
Because the solid dials don't show the shutters, I opted to remove the second crown for these. I didn't move the crown to the 3 o'clock position because the crown position is actually hardcoded in the implementation... I should really fix that, but again, I didn't originally intend for this project to reach this scope, so there are some dangling issues like that.
Once the second crown was removed, it became apparent that I had to also make a variant of the selected case for one crown. Likewise, case designs I added after adding solid dial mode, I had to adapt for two crowns. So, some of the cases ended up looking pretty funky in that configuration.
The solid dials looked very empty, so I added a little logo. Nothing fancy, just something I cooked up quickly. It's like, a W for Wilson (which is my name), and then a little scene of two mountains as the W's the inverted silhouette. That, um, symbolizes that I like Twin Peaks. Or something. I wanted the logo to be pretty nondescript. I'm not a formally-trained graphic designer. I also put a fake brand name on there to fill in the lower section of the dial.
For the date, it was kind of tricky to align everything just right re-using the same dials as before. Of course, all the dials already had room for a date wheel, since they were designed to work with my rotating shutter complication, so it meant I could just replace the center of the dial. I'm fairly pleased with how the dates roll over at midnight, too. I made them change "realistically" to how many watch movements do it, where they start rolling forward around 11 then click to the next date at midnight.
For Pride, I added a Rainbow Mode. Quite simply, this changes the indices to rainbow colors. What you don't see is the trigonometry that went into this change. Rather than hardcode a set of colors and manually assign them to the different index elements, I devised a system that calculates the angle to each index from the center of the dial, and maps that to a corresponding color value. That way it would hypothetically work with any dial.
Adding dive bezels allowed me to create a pretty good imitation of the Doxa Sub 600T
While the original watch was designed around an inner rotating time tracking system, many of the dial and hand designs I created were copied from dive watches. So I went ahead and let you put a rotating dive time bezel on there. Not many options (yet) for those, but the implementation is very nice. Unlike the other controls in the simulator, for the rotating bezels I actually implemented the ability to click and drag to rotate them. They lock to 120 different positions, and even work with touch on mobile (in Firefox, anyway).
There are also multiple fixed bezel options now: smooth, fluted, and gold.
Can YOU tell what time it is?
Here's another new mode I added. It's my take on the concept of a watch with only an hour hand. It's not exactly super readable, but I'm proud of how it turned out. You can find eye mode as both a setting and a preset in the watch sim app.
The current hour is indicated by the eye's line of sight, and the number of minutes until the next hour is shown using the eyes around the edge (in 5 minute increments). This is easiest to see if you change the time quickly: the eyes at the perimeter close as the hour passes, until the new hour, when they all open back up. They close in clockwise order, with the last eye open the one just before the current position of the hour. The current 5-minute block of time is indicated in red, to make it a bit clearer. If you look really closely, the actual minutes are printed in the red section of the eye, but this is probably too small to be of any use.
I came up with this based on an idea for a watch that could tell the time, to the nearest 5 minutes, using only the rotation of a single hour disc. Like my other watch concept, it relies on a shutter system to selectively expose regions of the dial. Unlike the other design, the shutter is fixed, while a lower wheel whose motion (there's just one) is driven by the movement spins beneath it. I recommend using the visibility slider on the left to drill past the top layer to get an idea of how this works. Each of the 12 sections of the wheel is divided into 12 subsections, which are colored white, black, or red. As the wheel moves through the hour, the subsections pass under the eye-shaped windows in the shutter or upper dial, causing the eyes to open and close as time passes.
As a consequence of the large number of subsections (the dial needs to be radially divided into 144 wedges, if you see what I mean), the indicators need to be pretty small. If I were to iterate further on this design, my focus would certainly be on legibility, as the current design is not very easy to read. The easiest way to improve this would be to make the eyes occupy a wider section and farther out along the dial. Using a different shape than an eye would also allow the cutout to be larger, and potentially permit usable minute text. I went with the eye motif because this is a novelty watch design, and therefore I wanted something a bit more fashion than function, but I think a sort of minimalist geometric design would also fit this mechanism quite well.
As with the dual-rotating-shutter watch, I didn't patent this or anything and have no concept of the practical realities of manufacturing such a watch. If you run a novelty watch microbrand and want to rip off this design, go for it. Just send me one.
Gary Larson, please don't sue me.
Finally, the coup de grâce, my ultimate achievement in watch simulation: Cow Tools. I don't make any money off this, of course, so I don't think Mr. Larson would really have a case should he choose to litigate against me for this humble homage. I've employed the various primitive tools (lacking something in sophistication) as the hands on a watch. Like all watch hands, their purpose is determined by their length: the prongler is the seconds hand, the hoofsaw is the minute hand, and the humble lump-with-handle is the hour hand. Thankfully when our bovine friend here fashioned these rudimentary instruments, he did so in a rather pointed fashion, and gave me the requisite lengths to work with. I, for one, think this is a very sophisticated watch. Mr. Larson, hit me up for a discussion of merchandising possibilities.
If you've been following the watch simulator (and I know so many of you have been), you may have noticed it had grown a bit sluggish. Specifically, it seemed to take ages to load in the various components, and changing presets could be a mess. Well, I thought about adding some code to make the changes more graceful (fully load all the new svg elements before showing them, then hiding the old ones) but I was too lazy. Instead, I identified the true cause of the problem: my svgs were huge! This largely came about due to the bitmap textures I was using for some of the straps, and the fact that I was using old files as a template then not removing hidden elements. I optimized them using SVGOMG and it made a huge improvement. Only after I did did I realize this is backed by an open source project, SVGO. Using their node.js CLI looks like a better way to run this sort of optimization in bulk for larger projects, so I'll have to remember that in the future.
While I haven't done much work on this project lately, there are a few things that would be interesting to do with it next, if I decide to get back into it.
And of course, I may decide to add more design options within the current capabilities of the platform.
Overall, this is a sort of silly project; it doesn't serve much practical purpose other than being able to show a customizable clock face on your screen. But I did get some valuable experience out of it. For one thing, I taught myself how to use InkScape and I think improved substantially at vector art. I also think it's worth having this project as a starting point for mocking up watch designs. I don't currently have any plans to develop any real watches, but watch ideas come to me quite frequently, and now I have a place to put them.
If you'd like to try the Watch Simulator, you can find its large, standalone version here. Firefox is recommended (because I only tested it in Firefox, but also just generally recommended).