Tick-Tock Clock

Tick-Tock Clock is a feature-rich flip-clock web app that started as a simple request from my younger sister: she wanted a beautiful desktop clock of her own. What began as a minimal time display quickly grew into a daily companion that combines time, productivity, music and learning — all running in a single page.

The app shows an animated flip clock with the live date, motivational quotes in both Chinese and English, and a fully customizable background. Around that core, it layers a growing suite of tools: daily goal setting, pomodoro focus sessions, an achievement system, music playback, typing practice, a Cantonese pronunciation helper, and even a PDF reader.

The project was born from a personal request. My sister wanted a desktop clock with more personality than the default one — something that looked great on screen and could actually be useful during study time. We browsed paid desktop app options together, but none fit exactly what she imagined.

So I built it. The first version was drafted quickly with AI assistance, then refined feature by feature based on her feedback. The clock had to look good on her machine — and it had to help her study.

The heart of the app is a modern flip-clock that displays time in hours, minutes and seconds with real flip-card animations. The current date and day of week are shown live, and the page randomly rotates motivational quotes in Chinese and English to keep the mood up.

Around the clock, the app grew a complete study toolkit. Each daily goal can be linked to a pomodoro session, and every completed session feeds into a leveling and achievement system that makes studying feel like a game.

Study sessions need the right soundtrack — and the right breaks. A built-in music player scans local music files automatically, and a Cantonese pronunciation helper makes language practice effortless.

Tick-Tock Clock is a dependency-light web app built with plain HTML5, CSS3 and Vanilla JavaScript. It leans on the Canvas API for animations and LocalStorage for persistence — every setting and every day of study data survives a refresh.

Development was AI-assisted from the start: the initial version was drafted with AI help, then iterated with hand-picked open licenses. A flip-clock library powers the signature animation, while music and image assets come from free sources to keep the server footprint small. The same page is wrapped in a WebView so it also runs as an Android app, always in sync with the live site.