Flip clockPro
Split-flap countdown where every digit flips like a departures board.
Launch in
days
hours
minutes
seconds
minutes
seconds
When to use
- Launch countdowns, sales ending, event starts and short timers.
When not to use
- Precise timing in tools: use plain text.
Installation
Usage
Import it from @/components/ui/flip-clock after installing.
example.tsx
import { FlipClock } from "@/components/ui/flip-clock";
// To a moment
<FlipClock to="2026-11-01T17:00:00Z" />
// A duration from mount
<FlipClock seconds={15 * 60} units={["minutes", "seconds"]} onComplete={expire} />API reference
FlipClock
A split-flap countdown. Renders dashes until the browser has the time, so server and client agree.
| Prop | Type | Default | Description |
|---|---|---|---|
| to | Date | string | – | Count down to this moment. |
| seconds | number | – | Or count down this many seconds from mount. |
| units | ("days" | "hours" | "minutes" | "seconds")[] | all four | Units shown, largest first. |
| onComplete | () => void | – | Called once at zero. |
| size | "sm" | "md" | "lg" | "md" | Digit size. |
Accessibility
- role="timer" with a readable label like "02 days, 07 hours … remaining".
- Digits are aria-hidden; the label carries the value.
- Flaps are skipped under reduced motion.
Motion
- The top flap folds down (250ms), then the bottom flap falls into place (250ms).
Responsive behavior
- Wraps on very narrow screens; use size="sm" on phones.
Performance
- Ticks four times a second; only changed digits animate.
Notes for AI
- Change the key to restart a duration timer.
This page as Markdown, for assistants and coding agents:
/components/flip-clock/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt