A clock designed around horizontal lines, inspired by 1970’s vector graphics and a Justin Jay Wang post.
I was doing some readings on Creative Coding and Generative Design when I came accross this post by Justin Jay Wang, in which he shares his approach to design with code.
One of the examples he showcased was a mesmerizing set of marching lines going up towards a single red line and then disappearing. This was the starting point for my clock.
I figured it would be nice to write the time using only vertical lines that would perfeclty align with the marching lines from time to time, this could be our clock tick. I experimented with line widths, some glow, what should happen when the lines perfectly intersect.
Visually the clock was already appealing, but not quite functional. It needed it to tell me the seconds, or at least show me how much until the next minute. So a single marching red line was added to the composition. When the red line meets its end, a new minute is born.
It felt I needed to add the weekday and date to the clock, so I added on top of the composition, a busy area with nothing going on at the time.
Finally, I created some interaction. By clicking on the clock the user can alternate between designs: The default design is the design I described so far. THe alternate design is without all the marching white lines. The second design is cleaner, but does not use the mesmerizing lines that sparkled this whole composition. Anyways, I like both designs and both work great.
I used Michroma font, by Vernon Adams, under the SIL Open Font License, for “Caio’s Clocks”, the weekday and the date. The hours and minutes use no font, I draw them line by line.
October 2026