A split-flap countdown built the way the real boards work. Each card tips forward, catches a shadow on the way down, overshoots slightly and settles, so the motion reads as physical instead of a CSS flip. Days, hours, minutes and seconds, ticking down to zero.
Built properly
Real split-flap mechanics: the falling card carries the old digit on its front and the new one on its back, with a cast shadow on the half beneath it and a catch-light that fades as it lands
Animates only when it's in view, so nothing runs off-screen
Renders cleanly on the canvas and in static exports, no hydration flicker
Stops at 00:00:00 instead of running negative
Uses role="timer" with live updates muted, so screen readers aren't spammed once a second
Fully yours to style
Separate colors for the top and bottom halves of each tile, plus digit, label, seam and hinge
Tile width, height, radius and gap
Full Framer font controls on digits and labels, with tabular numerals so nothing jitters
Custom text for every label, so it works in any language
Layout
Fixed-size by default, and stretches to fill when you set it to 100% width. Drop it in and it works.
How the timer runs
The countdown is duration-based. You set days, hours, minutes and seconds, and it starts from that value on page load. It's built for evergreen urgency (launch banners, offer sections, waitlists) rather than counting to one fixed calendar date.
Refund Policy
Due to the digital nature of this product, all sales are final and refunds are not available. Please review the product details carefully before purchasing. If you have any questions, feel free to reach out before placing your order.
Support
Questions before or after buying: syedsaboor005@gmail.com
A split-flap countdown built the way the real boards work. Each card tips forward, catches a shadow on the way down, overshoots slightly and settles, so the motion reads as physical instead of a CSS flip. Days, hours, minutes and seconds, ticking down to zero.
Built properly
Real split-flap mechanics: the falling card carries the old digit on its front and the new one on its back, with a cast shadow on the half beneath it and a catch-light that fades as it lands
Animates only when it's in view, so nothing runs off-screen
Renders cleanly on the canvas and in static exports, no hydration flicker
Stops at 00:00:00 instead of running negative
Uses role="timer" with live updates muted, so screen readers aren't spammed once a second
Fully yours to style
Separate colors for the top and bottom halves of each tile, plus digit, label, seam and hinge
Tile width, height, radius and gap
Full Framer font controls on digits and labels, with tabular numerals so nothing jitters
Custom text for every label, so it works in any language
Layout
Fixed-size by default, and stretches to fill when you set it to 100% width. Drop it in and it works.
How the timer runs
The countdown is duration-based. You set days, hours, minutes and seconds, and it starts from that value on page load. It's built for evergreen urgency (launch banners, offer sections, waitlists) rather than counting to one fixed calendar date.
Refund Policy
Due to the digital nature of this product, all sales are final and refunds are not available. Please review the product details carefully before purchasing. If you have any questions, feel free to reach out before placing your order.
Support
Questions before or after buying: syedsaboor005@gmail.com
Syed Saboor
