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 |
|---|---|---|---|---|
| | | string | — | Target date/time. Any value parseable by new Date() |
| | | string | "days hours minutes seconds" | Space-separated list of units to display |
| | | boolean | false | Show unit labels below each digit group |
| | | boolean | false | Use slot-machine roll instead of flip animation |
CSS variables
| Variable | Type | Default | Description |
|---|---|---|---|
| | color | currentColor | Digit color |
| | color | currentColor | Label color |
| | length | 3.5rem | Digit font size |
| | length | 0.65rem | Label font size |
| | length | 0.75rem | Gap between digit groups |
Accessibility
When prefers-reduced-motion is set, digit transitions are instant with no animation.