Countdown Timer

Launch tiles where every digit rolls over like a flip clock

launch in
02
days
14
hrs
06
min
10
sec

Create an event countdown timer. A "launch in" caption over four dark tiles: days, hours, minutes, seconds, each a rounded ink square showing a two-digit monospace number with a small uppercase label below. The seconds number is in the accent color. Every tick, changed numbers roll like a flip clock: inside each overflow-hidden tile the old value slides up and out while the new one springs in from below (spring stiffness 460, damping 30). Because only changed tiles animate, most seconds only the seconds tile moves, with satisfying cascades at minute and hour boundaries. Compute the remaining time from a real target date each second (never accumulate deltas, always recompute from Date.now versus the target) and pad values to two digits so tiles never resize. Accessibility: the row uses role="timer" with an aria-label reading the full remaining time; avoid announcing every second (aria-live off). If prefers-reduced-motion is set, update numbers instantly with no rolling. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data