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.

// just this component — bundler pulls in nothing else
import 'motion-components/motion-countdown'

// or the whole library, if you use lots of tags
import 'motion-components'

Usage

<!-- Flip (default) -->
<motion-countdown to="2027-01-01T00:00:00" labels></motion-countdown>

<!-- Slot machine roll -->
<motion-countdown to="2027-01-01T00:00:00" labels roll></motion-countdown>

Format

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

<motion-countdown
  to="2027-06-01T00:00:00"
  format="hours minutes seconds"
  labels
></motion-countdown>

Theming

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

motion-countdown {
  --mc-countdown-color: #60a5fa;
  --mc-countdown-label-color: #8888a8;
  --mc-countdown-size: 4rem;
  --mc-countdown-label-size: 0.65rem;
  --mc-countdown-gap: 1rem;
}

Properties

Attribute	Property	Type	Default	Description
to	to	string	—	Target date/time. Any value parseable by new Date(). After the countdown finishes, setting to to a future time starts it counting again
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. Set it to "false" to hide them
roll	roll	boolean	false	Use slot-machine roll instead of flip animation

CSS variables

Variable	Type	Default	Description
--mc-countdown-size	length	3.5rem	Font size of the digits
--mc-countdown-color	color	currentColor	Digit color
--mc-countdown-gap	length	0.75rem	Space between units
--mc-countdown-label-size	length	0.65rem	Font size of the unit labels
--mc-countdown-label-color	color	currentColor	Unit label color

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.