Whitco Web · Effect Demo
Countdown Timers
Three types of countdown timers — each built for a different use case. This one started the moment you loaded the page.
Session timer — starts fresh every time the page loads. Reload this page to watch it reset to 24:00:00.
Timer Type 01
The Session Timer
This is what you saw in the hero above — a countdown that starts fresh every time someone loads the page. Set it to any duration: 24 hours, 48 hours, one week. The clock starts the moment the visitor arrives.
Best used for: Limited-time offers, flash sales, event day countdowns, or anywhere you want to create a sense of urgency tied to the visitor's arrival rather than a specific date. No backend needed — works entirely in the browser.
Timer Type 02
The Recurring Timer
This timer counts down to a set interval — in this demo, 10 seconds — and automatically resets when it hits zero. Watch it reset and start again without any page refresh.
Demo — Resets every 10 seconds
Watch it hit zero and restart automatically
Best used for: Weekly specials, recurring happy hours, or any promotion that runs on a set schedule. The timer counts down to the next occurrence and resets automatically when it hits zero — no page refresh, no manual updates. In a real deployment set to a weekly interval, refreshing the page does not restart the timer. The 10-second reset in this demo is just to let you see the behavior without waiting a week.
Timer Type 03
The Fixed Date Timer
This timer counts down to a specific date. When that date arrives, the timer stops at zero. It does not reset on its own.
Countdown to the New Year
Best used for: Grand openings, one-time events, product launches, or any specific date you want to build anticipation toward. Once the date passes, the timer sits at zero until the code is updated with a new target date. For recurring annual events like holidays, the code can be written to automatically roll to the next year — which is how this demo works. For one-off events with no predictable repeat date, the target date has to be changed manually in the code, or through backend software that lets you update it without touching code at all.