# Flip clock

> Split-flap countdown where every digit flips like a departures board.

Component · Pro · https://lodeui.com/components/flip-clock

## When to use

- Launch countdowns, sales ending, event starts and short timers.

## When not to use

- Precise timing in tools: use plain text.

## Installation

```bash
npx shadcn@latest add @lode/flip-clock
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Date range picker](https://lodeui.com/components/date-range-picker) — Pick a start and an end on a calendar that previews the range as you move.