A split-flap countdown clock. Each digit folds down in 3D with a soft shadow, grouped into days, hours, minutes and seconds.
npx shadcn@latest add https://hyperblur.dev/r/flip-countdown.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/flip-countdown.tsx.
import { FlipCountdown } from "@/components/hyperblur/flip-countdown"
<FlipCountdown target="2026-12-31T00:00:00Z" size={48} onComplete={() => console.log("Launch")} />| Prop | Type | Default | Description |
|---|---|---|---|
| target | string | required | ISO date string to count down to, for example 2026-12-31T00:00:00Z. Digits show -- until the component has mounted, so server and client markup match. |
| labels | string[] | ["Days", "Hours", "Minutes", "Seconds"] | Captions under each group, in the order days, hours, minutes, seconds. |
| color | string | "#ededed" | Digit color. |
| size | number | 48 | Digit font size in pixels. The clock shrinks on its own when its container is too narrow. |
| onComplete | () => void | Called once when the countdown reaches zero. | |
| hideDays | boolean | false | Drop the days group once less than a day remains. |