KQ-925 · COUNTDOWN/CARD

Countdown Card

A message that is counting, and the moment it stops. Each digit column is ten faces tall and takes its new position on snap, so the seconds column rolls every second while the minutes column sits still until it is its turn, and a rail under the digits drains linearly across the whole span. Reaching zero turns the card: the countdown face rotates from 0 to 90 degrees while the event face rotates from -90 to 0, both on glide with their back faces hidden, so one card turns over rather than two swapping. The run is one motion value started by a prop, held while the document is hidden, and never reads a clock.

KQ-925 · COUNTDOWN/CARD

Bay four opens
Held at 1 minute 24 seconds
09:12

held · 01:24 left

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/countdown-card

Props

event: CountdownEvent; default —; The message: id, from, title, the line the event face shows on arrival, and an optional place, time and delivery mark.
seconds: number; default —; The run's length in seconds. Changing it is the reset: the run remounts and starts over.
running: boolean; default false; Runs the countdown. The timing belongs to the host, never to a clock the card reads.
onRemainingChange: (seconds: number) => void; default —; Fires from the run each time the whole second changes.
onReached: () => void; default —; Fires once, when the remainder reaches zero and the card turns.
showHours: boolean; default seconds >= 3600; Forces the hours column for a run shorter than an hour.
peerName: string; default "Them"; Names the sender in the delivery sentence.
label: string; default "Thread"; Names the thread for assistive technology.

Prop	Type	Default	Description
event	CountdownEvent	—	The message: id, from, title, the line the event face shows on arrival, and an optional place, time and delivery mark.
seconds	number	—	The run's length in seconds. Changing it is the reset: the run remounts and starts over.
running	boolean	false	Runs the countdown. The timing belongs to the host, never to a clock the card reads.
onRemainingChange	(seconds: number) => void	—	Fires from the run each time the whole second changes.
onReached	() => void	—	Fires once, when the remainder reaches zero and the card turns.
showHours	boolean	seconds >= 3600	Forces the hours column for a run shorter than an hour.
peerName	string	"Them"	Names the sender in the delivery sentence.
label	string	"Thread"	Names the thread for assistive technology.