cnc-countdown
A flip-clock counting down to a moment in time. One property —
time, a Unix timestamp in seconds — and the widget draws days, hours, minutes
and seconds, flipping each digit as it falls. The clock itself is
FlipDown, loaded from a CDN on mount.
Quick start
Compute the target in your block's state and bind it. The value is
seconds, so
Date.now()
needs dividing by 1000 — handing it milliseconds points the clock some fifty thousand
years out, and it simply reads zero.
<cnc-countdown :time="oneHour"></cnc-countdown>
// in the block's state
oneHour: Math.floor(Date.now() / 1000) + 60 * 60,Usage guidance
Use it where the deadline is the point and the drama is welcome — a launch, a sale ending, a maintenance window. It is a large, animated, always-moving element: one per screen, and never for a duration the reader is meant to read precisely.
The clock and its stylesheet are fetched from a CDN when the widget mounts, so it renders empty on the server and appears after hydration, and it will not run at all offline. For a plain "3 days left" in a table cell, format the difference yourself — this widget is a feature, not a formatter.