Flip Clock
A live digital flip clock with fullscreen, 12/24-hour mode, and optional seconds.
Syncing time
AM
--
--
Hours
--
--
Minutes
--
--
Seconds
What is a flip clock?
A flip clock is a digital clock that displays time with split-card turning animations, inspired by the classic mechanical flip clocks from the mid-20th century. These iconic timepieces became popular for their unique visual appeal and nostalgic charm, using physically flipping cards to show changing numbers.
This tool perfectly recreates the classic flip clock effect with realistic page-turning animations for every digit change. It runs directly in your browser with no downloads required, featuring fullscreen mode, 12/24-hour format switching, and optional seconds display.
Perfect for: desk clock, office decoration, live streaming background, presentation timer, Pomodoro technique, large screen displays, and more. All time calculations happen locally, protecting your privacy.
This tool perfectly recreates the classic flip clock effect with realistic page-turning animations for every digit change. It runs directly in your browser with no downloads required, featuring fullscreen mode, 12/24-hour format switching, and optional seconds display.
Perfect for: desk clock, office decoration, live streaming background, presentation timer, Pomodoro technique, large screen displays, and more. All time calculations happen locally, protecting your privacy.
How to Use
How to use
- The clock automatically displays the current time and updates in real-time
- Click the '12H/24H' button to switch time format
- Click the 'Seconds/No seconds' button to toggle seconds display
- Click the 'Fullscreen' button to enter fullscreen mode
- Settings are saved automatically and restored on next visit
Tips
- Use fullscreen mode on a projector, wall display, or spare tablet when the clock needs to be readable from across a room.
- Disable system sleep or screen dimming if the clock must stay visible during meetings, classes, or events.
- Choose 24-hour time for schedules shared across regions, and show seconds only when precise timing matters.
Use Cases
Use a large readable clock on a second screenShow the current local time with animated flip cards, localized date text, and an optional fullscreen stage for desks, studios, classrooms, workshops, or livestream backgrounds. Because the page reads only the local system clock through the JavaScript Date API and uses CSS3 transforms for the flip animation, it never calls a remote time server and does not require sign-in or any cloud account to keep ticking.
Switch between practical display modesTurn seconds on or off and choose 12-hour or 24-hour display depending on whether the clock is for precise timing, ambient display, or a presentation screen. With seconds hidden the cards flip once a minute, which produces a calmer tick suitable for ambient displays; with seconds on, the minute and hour cards still flip together at the top of each minute so the page remains easy to read at a distance.
Keep timing visually clear without configuring alarmsThe page is a display clock, not a timer or scheduler. Use it when visibility matters; use countdown or pomodoro tools when you need alerts, sessions, or elapsed-time tracking. Keep the system clock accurate because the display follows the browser's local time.
Set seconds for studio timing, hide them for ambienceToggling the seconds row on gives a sharper beat for recording sessions and live talks; turning it off produces a calmer display for an office wall, lobby, or waiting room where the ticking would be distracting. The flip itself is rendered with a CSS3 3D transform using a perspective value, and the cards use a monospaced numeric slot so the wider '2' or narrower '1' does not shift the layout and trigger a 1-pixel jitter on every tick.
Pair the clock with a separate countdown for sessionsThe page is a display, not a timer, so use it with a dedicated pomodoro or countdown app when sessions, talks, or meetings need a visible end marker. Time stays consistent across windows since both pages read the same system clock. The fullscreen button uses the browser requestFullscreen API to push the page onto a projector, kiosk display, or spare tablet without showing the address bar, which is enough for a meeting-room wall clock and avoids the extra setup of a native kiosk app.
Technical Principle
Each digit card is split into a top half showing the current value and a bottom half showing the next value, with a third absolutely-positioned layer that rotates from 0deg to -180deg around the X axis. The parent receives perspective: 600px so the rotation reads as 3D depth rather than a vertical squash, and backface-visibility: hidden on the flipping layer prevents the mirrored back face from leaking through. Browsers promote the layer to its own compositor surface when will-change: transform is set, so the flip runs on the GPU instead of repainting text on every frame.
Time itself comes from Date.now() in milliseconds since the Unix epoch, but a naive setInterval(fn, 1000) drifts because timers fire on best-effort scheduling and accumulate skew. The tool instead schedules the next tick by computing 1000 - (Date.now() % 1000) so the boundary lands on the actual wall-clock second, and uses requestAnimationFrame for the flip transition so the animation pauses automatically when the tab loses focus or the monitor is asleep. The Page Visibility API (document.visibilityState) re-synchronizes the displayed digits on visibilitychange, avoiding a stale value when the user returns after several minutes.
Display formatting reads from the browser locale via Intl.DateTimeFormat with the hourCycle option ('h23' for 24-hour, 'h12' for 12-hour with AM/PM). Daylight saving transitions are handled implicitly because Date methods like getHours() already return local time including offset shifts, so the clock skips from 02:00 to 03:00 in spring and shows 01:00 twice in autumn without extra logic.
Time itself comes from Date.now() in milliseconds since the Unix epoch, but a naive setInterval(fn, 1000) drifts because timers fire on best-effort scheduling and accumulate skew. The tool instead schedules the next tick by computing 1000 - (Date.now() % 1000) so the boundary lands on the actual wall-clock second, and uses requestAnimationFrame for the flip transition so the animation pauses automatically when the tab loses focus or the monitor is asleep. The Page Visibility API (document.visibilityState) re-synchronizes the displayed digits on visibilitychange, avoiding a stale value when the user returns after several minutes.
Display formatting reads from the browser locale via Intl.DateTimeFormat with the hourCycle option ('h23' for 24-hour, 'h12' for 12-hour with AM/PM). Daylight saving transitions are handled implicitly because Date methods like getHours() already return local time including offset shifts, so the clock skips from 02:00 to 03:00 in spring and shows 01:00 twice in autumn without extra logic.
- 3D flip: CSS transform: rotateX(-180deg) on an absolute layer, parent perspective: 600px, backface-visibility: hidden to suppress the mirrored back face
- GPU compositing: will-change: transform promotes the flipping element to its own layer so transitions are composited, not repainted
- Drift-free tick: setTimeout delay computed as 1000 - (Date.now() % 1000) so each tick lands on the actual second boundary instead of accumulating timer skew
- Animation timing: requestAnimationFrame drives the 0deg to -180deg transition, which the browser throttles automatically in background tabs
- Background recovery: Page Visibility API listens for visibilitychange and re-reads Date.now() so digits jump to the correct value when the tab regains focus
- Locale and hour cycle: Intl.DateTimeFormat with hourCycle 'h23' or 'h12' selects 24-hour or 12-hour AM/PM display from the user's system locale
- Fullscreen control: Element.requestFullscreen() and document.exitFullscreen() drive the wall-display mode with Esc as the standard exit key
Examples
Desktop use
Resize browser window to fit a corner of your desktop as a persistent clock.Large screen display
Connect projector or large display, press F11 for fullscreen, show in meeting rooms or events.Live streaming background
Add browser source in OBS with the flip clock URL as your streaming background.FAQ
What time zone does the clock use?
Your device's local time zone, set via the OS. To display another zone, use a dedicated world clock tool. The clock follows the system's notion of time, so VPNs and timezone spoofing do not change it.
Can I switch between 12 and 24-hour format?
Yes. Toggle in settings. 12-hour shows AM/PM; 24-hour shows 00-23 with no AM/PM. Picks one or the other based on your preference; some builds match the OS locale by default.
Why is the second hand sometimes jumping by more than 1 second?
Background-tab throttling. When you switch away, browsers slow update rate; on return, the clock catches up by skipping. Keep the tab focused for smooth animation. If it skips while focused, your CPU is overloaded - check what else is running.
Does the flip animation impact performance?
The CSS transform animation is GPU-accelerated and lightweight on modern devices. On older laptops or phones, you may see slight stutter once per second. Disable the flip animation in settings if you prefer a static clock face.
Can I keep it running fullscreen all night?
Yes - it's designed for fullscreen use as a desk or bedside clock. Modern OSes will dim or sleep the display unless you keep it awake (set 'never sleep' in display settings, or use OS NoSleep). On laptops, plug into power; battery sleep modes will pause the tab.
Will it stay accurate over hours?
Yes. The clock is driven by the system clock, which stays in sync via NTP on networked devices. Drift over a 24-hour run is typically under one second on a modern OS.
Is anything uploaded?
No. The clock reads time from your device. Nothing is logged or transmitted.