The open-source flip clock: flipclock-sts

Flip Moment is open source, the whole site: github.com/wang11453/flipclock-sts, MIT licensed. Every page you use on flipclock.stsqz.com - clock, stopwatch, countdown, pomodoro, guide - is in the repo, and the twelve scenario pages sit in the longtail/ directory too.

Why open source

The flip animation hid more traps than expected: how to make the top and bottom halves meet with zero seam, how to keep cascading digits from turning noisy, how to tune the falling card so it feels like it has weight. The answers are all in the code - left here as a reference for anyone else building a flip clock.

Running it

Pure front end: no dependencies, no build step. Pull the repo, hand it to any static server, and it runs:

python3 -m http.server 8000

Open index.html and you're on the landing page. Fonts are self-hosted under static/fonts/, so it works fully offline.

Worth reading in the code

• The rational-number solver: another math machine besides Twenty-Four - except it isn't, this one's the flip clock; the solver actually lives in the logic block of clock.html: integer pairs as fractions, gcd reduction, exact comparison, powering validation and puzzle generation
• The synchronized flip engine: both halves share one bezier curve, rising and falling together - zero seam at the split line, in about 40 lines of CSS
• Logic separated from the DOM: pure logic blocks branch through module.exports, testable directly in node, with a 1000-round self-test script alongside the repo
• Known quirks: the README honestly lists dropped frames on low-end machines and uneven long-tail page copy - nothing swept under the rug

How the live site relates to the repo

The live site is exactly this code running behind nginx - the team uses it every day too. Found an issue or want a feature? Open it straight in the repo.