Free Flip
Countdown Timer Widget
Mechanical 3D flip animation on every tick. Dramatic, attention-grabbing, and unforgettable — the Flip style turns a countdown into an event.
Widget Builder
Configure & Embed
Customise your Flip countdown then copy the embed code.
Widget Settings
About This Style
About the Flip Style
The Flip countdown timer is inspired by one of the most beloved pieces of mid-century design: the mechanical flip clock. Found on office desks, bedside tables, and airport departure boards throughout the 1960s and 70s, the physical flip clock captivated with the satisfying sound and motion of its rotating digit tiles. The Flip widget recreates that sensation in pure CSS — no JavaScript animations, no canvas, just hardware-accelerated 3D transforms that feel genuinely tactile.
Each unit's display is divided into a top half and a bottom half. When a digit changes, the top half of the current number folds down while the new number's bottom half flips up to meet it, producing the characteristic split-card fold. The animation timing is carefully tuned: fast enough to feel snappy, slow enough to register visually without becoming a distraction. Dark card faces with bold white digits ensure high contrast at any size.
The Flip style is a natural fit for product launches where drama matters. Limited-edition drops, concert ticket sales, NFT mints, and software pre-order pages all benefit from the sense of momentum and urgency that the flip animation conveys. Each visible tick is a small reminder to the user: time is moving, the window is closing, act now.
Despite its visual richness, the Flip countdown is GPU-accelerated and runs entirely in an isolated iframe. Your main page thread is untouched, meaning there is no risk of the animation causing scrolling jank or input delays on your site. It performs smoothly on modern mobile devices and has been tested across Chrome, Firefox, Safari, and Edge.
Whether embedded on a simple HTML page or integrated into a complex web application, the Flip countdown is a premium-feeling widget that takes only seconds to configure and deploy.
Integration
How to Embed the Flip Countdown
- Configure your target date, timezone, and colours using the form above.
- Click Copy Code to copy your personalised snippet.
- Navigate to your website's page editor and find a Custom HTML or Embed code area.
- Paste the snippet into the HTML area where you want the countdown to appear.
- Save and publish — the flip animation will play live for every visitor.
Your embed code will look like this:
<div data-wf-widget="countdown-flip"
data-wf-target="2026-12-25T00:00:00Z"
data-wf-title="Christmas Countdown"
data-wf-size="inline"></div>
<script src="https://widget-forge.com/embed.js" async></script>Platforms
Platform Guides
WordPress
Add a Custom HTML block and paste your embed code. The Flip widget is particularly powerful in WordPress landing page builders like Elementor or Divi — place it in a full-width row above your call-to-action for maximum impact.
Squarespace
Insert a Code block in HTML mode and paste your embed code. The Flip widget renders well in Squarespace's promotional sections. Ensure the section background is dark to maximise the contrast of the card faces.
Wix
Add an HTML iFrame element and paste your code. Size the element to roughly 150px tall. On Wix event pages the Flip countdown creates an immediate sense of occasion that static text cannot replicate.
Webflow
Drop an Embed component onto the canvas and paste your code. The Flip widget integrates cleanly into Webflow interactions-driven pages. Use Webflow's visibility settings to show the countdown only during a specific date range.
Plain HTML / CSS Sites
Paste directly into your HTML. The Flip widget loads its own CSS within the iframe so there are zero style conflicts. Works on static sites, GitHub Pages, Netlify, and any CDN-hosted HTML page.
Support
Frequently Asked Questions
Will the flip animation slow down my site?
No. The flip animation uses CSS 3D transforms which are GPU-accelerated in all modern browsers. The animation runs inside an iframe which is isolated from your main page thread, meaning it cannot cause layout reflow or jank on your site. The performance impact is negligible even on mid-range mobile devices.
Does it work on mobile?
Yes. The 3D CSS transforms used for the flip animation are hardware-accelerated on both iOS and Android. The widget scales and reflows correctly at smaller screen widths, and the animation remains smooth at 60fps on any device made after 2018.
Can I change the flip card colour?
Yes. Use the Tertiary colour in the colour scheme picker to set the background of the flip cards. The text colour is controlled by the foreground colour option. You can create custom combinations — for example amber cards with white digits, or dark slate cards with gold numerals.
How do I embed it in a WordPress post?
In the WordPress block editor add a Custom HTML block where you want the countdown to appear. Paste your embed code into the block and click Update or Publish. The flip animation will play live for all visitors, including those on mobile browsers.
Can I disable the animation?
The flip animation is the defining feature of this style — if you prefer no animation, the Classic or Cards styles are better choices. However, the animation is subtle and quick (under 300ms per flip) so most visitors find it engaging rather than distracting.
More Options