Study 03 · Countdown clock
Every second.
A little clunk.
A quick mechanical roll, with a firm landing. Only the changing digits move.
03 days, 08 hours, 24 minutes remaining
200ms per tickDigits onlyOne beat per second
Live countdown · sample event time
Developer notes
Build this movement
Quick travel. Firm stop.
- 200ms total: 170ms upward travel, then a 30ms, 1px settle.
- Clip each digit into a fixed slot. The old number leaves above; the next enters from below.
- Only changed digits move. All changes on a rollover happen together.
- Keep labels, dividers, border and background completely still. No fade, blur or sound.
Connect to the event
- Use the CMS event timestamp with an explicit timezone. Recalculate from that deadline on every tick.
- This study isolates the digit motion. In the event block, keep the scheduled start time visible and swap to Starting soon below four hours.
- Reduced motion: update the numbers instantly. Stop at zero; pause work while the tab is hidden.
- Copy includes the responsive timer and movement. Connect your existing GT Walsheim font and BC colour variables.