motion-countdown

Animated countdown timer with per-digit transitions. Choose between a smooth flip or a slot-machine roll for each digit.

Preview: Flip (default)

Preview: Roll

Import

Two ways: pick whichever fits your bundle.

Usage

Format

Control which units appear with the format attribute: a space-separated list of days, hours, minutes, seconds.

Theming

Style via CSS custom properties. They pierce the shadow DOM.

Properties

Attribute Property Type Default Description
to to string — Target date/time. Any value parseable by new Date()
format format string "days hours minutes seconds" Space-separated list of units to display
labels labels boolean true Show unit labels below each digit group. Cannot be switched off from markup; set el.labels = false
roll roll boolean false Use slot-machine roll instead of flip animation

CSS variables

Variable Type Default Description
--countdown-color color currentColor Digit color
--countdown-label-color color currentColor Label color
--countdown-size length 3.5rem Digit font size
--countdown-label-size length 0.65rem Label font size
--countdown-gap length 0.75rem Gap between digit groups

JavaScript API

Control the countdown programmatically with play(), pause(), finish(), and cancel().

playState: –

Accessibility

When prefers-reduced-motion is set, digit transitions are instant with no animation.