Countdown Timer
Launch tiles where every digit rolls over like a flip clock
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.