Flip Clock

The clock displays hours, minutes, and seconds with animated flip transitions

Each digit panel flips with a realistic mechanical animation when the number changes

Toggle between 12-hour and 24-hour time format in the settings

Customize background color, card color, and text color to match your setup

Use fullscreen mode for maximum impact on a large or dedicated display

The Mechanical Flip Clock

The split-flap display — commonly called a flip clock or Solari board — was invented in the 1950s and became the dominant public information display technology through the 1970s and 80s. Individual numeral cards were attached to rotating drums; as time progressed, the drum would advance and the current card would flip down with a characteristic clack. The sound of a large split-flap board updating — hundreds of cards flipping simultaneously — is one of the most distinctive sounds of mid-century transport infrastructure.

Solari Boards in Airports and Stations

The Solari di Udine company in Italy manufactured the most iconic split-flap boards, which became known generically as "Solari boards." They were used in airports, train stations, and hotel lobbies worldwide. The last major analog Solari board in US service — at Penn Station in New York — was retired in 2016. Boards at Schiphol Airport in Amsterdam and Zürich Airport remain in service. The flipping animation and ambient sound became so beloved that digital replacements now often simulate it.

CSS Flip Animation

The flip clock animation is achieved entirely with CSS 3D transforms — no canvas, no WebGL. The flip transition uses rotateX() to pivot the card around its horizontal center, with two card faces (the static next value and the flipping current value) switching visibility at the halfway point of the animation. Getting the timing, easing, and shadow effects right requires careful calibration to avoid visual glitches. The result is a smooth, GPU-accelerated animation that runs at 60fps without impacting performance.

Retro Design Resurgence

Flip clock aesthetics have experienced a significant design revival driven by nostalgia and a broader "analog revival" movement in digital design. Apps like Fliqlo (Mac screensaver), streaming interfaces, and countless web designs have adopted the flip clock as a symbol of elegant simplicity — function without ornamentation. The combination of mechanical motion and crisp typography taps into a cultural longing for the craftsmanship of pre-digital objects.

Time Display for Focus and Productivity

A dedicated clock display has cognitive benefits over checking a phone or status bar: it does one thing only, requires no mode-switching, and does not trigger notification checks. Glancing at a flip clock provides only time — no messages, no calendar bubbles, no battery anxiety. For deep work sessions, having a physical or virtual analog time reference that cannot push notifications is genuinely conducive to focus.

Display Sizes and Contexts

The flip clock scales elegantly to any display size. On a 13-inch laptop used as an office clock, the display sits comfortably at a normal viewing distance. On a 55-inch TV in a lobby, the large digits are readable from across a room. For presentation use, the contrast between the clock background and card colors determines readability against ambient light — dark cards on a light background perform better in bright conference rooms; light-on-dark works well in dim environments.

A flip clock is a mechanical clock style from the 1960s–80s that displays time using cards that physically flip to reveal each digit. This digital version recreates the animation in your browser.