Design / Web/TicToc
31 / 67

04/2023Design / Web

TicToc

An Apple-inspired page: a clock that ticks upward, a blob that trails your cursor, and rotating quotes from Foundation and a few other favorites.

╌╌╌╌

An Apple-inspired page that turns the passing of time into something to watch. The README asks whether you can feel the dreadful ticking of it: a clock counts upward second by second while a progress ring sweeps six degrees a tick — a full turn each minute — and the numerals counter-rotate against it. It lives at tictoc.amittai.studio.

The quotes are the real point. Every ten seconds a shuffled deck of lines fades one out and the next in, mostly from Foundation, my favorite show — Salvor Hardin, Gaal Dornick, Brother Day, Demerzel — with a few from elsewhere. When the deck runs out it reshuffles, so the order never repeats. Clicking anywhere pauses both the clock and the rotation and puts up a Paused card until you click again.

It all runs on one small script. A soft blob trails the cursor, easing toward each new pointer position over three seconds so it always lags a little behind. There is no build framework — a single Counter class in TypeScript, jQuery for the DOM and the quote fetch, Sass for style, and Vite to bundle it. The page is static, so it loads instantly.

References

  1. Project repository
  2. Live site

╌╌ END ╌╌