Flip Clock Online — A Free Fullscreen Mechanical Split-Flap Clock

A Split-Flap Clock, Rebuilt for the Browser

Split-flap displays — the mechanical departure boards at old train stations and airports — worked by flipping physical cards to reveal the next digit. This recreates that motion entirely in CSS: no download, no screensaver install, just a page that flips.

How the Split-Flap Motion Works

It's not a fade — here's the two-stage mechanical motion underneath every flip.

Two static halves at rest

Between changes, each card is just two flat panels split by a hairline divider — the top half already showing the current digit, the bottom half briefly holding the previous one. That's the resting shape of a physical split-flap card, not a single glyph that happens to animate.

A folding flap plays the transition

On change, a top flap carrying the old number folds down and out of view, then a bottom flap carrying the new number folds up into place right after — two sequential folds, not one cross-fade standing in for a flip.

Real 3D perspective, not a 2D trick

The folding panels rotate through actual CSS perspective with the back face hidden, so what you see as the card swings is the same illusion a physical card's edge makes — not a flat opacity fade dressed up to look mechanical.

How to Use

The whole setup takes about as long as reading this sentence.

Open in any browser

The cards are already flipping by the time the page finishes loading — no split-flap hardware to track down, no screensaver to install, and it looks the same whether you're on a laptop, a phone, or a spare monitor.

Pick your card color

Eight card finishes are one tap away in Settings; whichever one you land on sticks around the next time you open the page.

Tweak the display

The card colors aren't the only toggle — seconds, the date, and 12 vs. 24-hour format each get their own switch, and changing one doesn't reset the others.

Go fullscreen

Tapping fullscreen strips the browser chrome away entirely, leaving just the split-flap board on screen; add Keep Screen On if you're stepping away and don't want it dimming.

Features

What the flip clock actually does, in plain terms.

Genuine split-flap flip animation

The only style on this site built around motion instead of a static glow or fill — see exactly how the fold works in the section above.

12 / 24-hour format

Toggle between AM/PM and 24-hour railway-style numerals whenever you like, independent of the seconds and date settings.

8 card colors

Flip Noir, Mono, Cream, Ocean, Rose, Forest, Slate, and Sunset — eight card finishes, all with the same mechanical flip motion.

Fullscreen mode

Fills the whole screen in one click — good as a standalone wall display or a departure-board centerpiece on a shelf.

Keep screen on

The same Wake Lock API that keeps a video call's screen awake is what stops this one from dimming mid-flip.

Works everywhere

Shrink the browser window, or open it straight on a phone, and the cards scale down smoothly to fit — no overflow, no zooming needed.

Runs in your browser

No account, no server round-trip — the flip animation runs entirely client-side, and whatever you set in Settings stays on this device.

FAQ

Common questions about the flip clock, answered directly.

Why does the clock flip instead of just changing the number?

It's imitating a split-flap display — the mechanical departure-board clocks used in old train stations and airports, where each digit is printed on a physical card that flips over to reveal the next one. We recreate that motion in CSS rather than just swapping text.

Is this the same thing as a Fliqlo screensaver?

Similar idea, different form — Fliqlo is a downloadable screensaver for macOS/Windows that takes over your whole screen when idle. This is a live webpage you keep open and control directly (fullscreen, themes, seconds), no install required.

Is a flip clock good for studying?

Yes — it marks time passing without counting down, so you stay aware of the hour without a shrinking number adding pressure. Turn seconds off in Settings for a display that only moves once a minute. It won't ring when a study block ends, though — for a hard deadline, use the Timer page instead.

Will the flip animation slow down my computer?

No — it's a pure CSS transform, not a video or canvas animation, so it costs almost nothing even on older hardware.

Can I put this on a second monitor?

Yes. Open it in its own browser window on the second display and hit fullscreen — no need to keep any browser chrome visible.

Can I show the date alongside the time?

Yes — toggle the date on in Settings alongside seconds and 12/24-hour format, so the split-flap board shows a full date-and-time readout instead of just the clock.

Will the flip clock keep my screen from going to sleep?

Yes — flip on Keep Screen On in Settings. It relies on the Wake Lock API (supported in Chrome, Edge, Firefox, and Safari) to stop your device from dimming or sleeping while the board is up.

From the Blog

Prefer a glowing LED pixel grid, real BCD binary dots, or neon gradient look instead? See the Pixel Clock Online, Binary Clock Online, or Neon Clock Online, or head over to the Digital Clock, which has every theme and setting in one place.