Countdown Timer — accurate in background tabs

What does the Countdown Timer do?

The countdown timer is a multi-mode tool that combines four related timer use cases on a single page: a single timer for tea or a one-off task, multi-timers with up to five parallel countdowns for cooking or workout intervals, a Pomodoro mode with the classic 25/5 cycle plus a streak counter and a long break after four pomodoros, and an event countdown to a specific date like New Year, a birthday, or a project deadline.

Three properties differentiate the tool from the surveyed competition: First, the countdown is background-accurate. Where classic setInterval implementations accumulate drift in throttled tabs (see Mozilla Bug #652472 and Chrome’s tab throttling), this tool stores only the target timestamp and re-derives remaining = target - Date.now() on every render. The wall clock is the source of truth — no matter how rarely the tab ticks, the next tick shows the correct remaining time. Second, it combines single, multi, Pomodoro, and event in one tool. Cooking-timer competitors cannot do Pomodoro, Pomofocus cannot do multi-cooking, e.ggtimer cannot do multi. Third, the sticky persistence is pure-client: every timer survives a reload via local storage, with no account requirement, no cookie banner, no sync server.

The UI follows the Refined Minimalism principle: a mode selector at the top, mode-specific input fields below, a single large Start button, the result prominent in a mono-font card. The tab-title update shows the remaining time quietly in the browser strip — you do not need to flip back to the tab just to check the time.

How does the background-accurate tick work?

Browsers throttle the update frequency of background tabs to save energy — Chrome to 1 Hz, Firefox to 0.5 Hz, Safari even more aggressively on battery (Page Visibility API). A naive Pomodoro timer that decrements remaining -= 1000 on every setInterval tick will accumulate 5–10 seconds of drift over a 25-minute cycle in a hidden tab — the alarm fires correspondingly late.

This tool takes a different approach. On start, the wall-clock target timestamp endTimestamp = Date.now() + durationMs is stored. On every setInterval tick (every 200 ms) the value is re-derived: remaining = endTimestamp - Date.now(). If the tab is throttled to one tick per second, that single tick jumps the full throttled interval — the remaining value stays correct because it is derived from the system clock, not from a tick count. On reload, the same endTimestamp is restored from local storage and the remaining time continues as if nothing happened.

The audio alarm has its own drift problem: setTimeout can fire late or fall out of throttling. The fix is the Web Audio API: oscillator nodes are scheduled with AudioContext.currentTime, which is not throttled — even after an hour in the background the alarm plays at the exact scheduled second once the tab regains focus. On iOS Safari the AudioContext must be “unlocked” once by a user gesture, which happens automatically when you click Start or the “Test sound” button.

How is the Pomodoro mode structured?

The Pomodoro Technique was developed in the late 1980s by Francesco Cirillo and named after his tomato-shaped kitchen timer (Pomodoro Technique on Wikipedia, pomodorotechnique.com). The classic cycle: 25 minutes of focused work, 5 minutes of break, four times — followed by a long 15-minute break as a reset before the next round.

The Pomodoro mode in this tool implements that cycle as a state machine. After every work block the tool automatically switches to the break, after every break back into work; after four work blocks (completedWorkBlocks % 4 === 0) the next break becomes the long break. The counter shows how many pomodoros you completed today — visible as a streak, resettable any time.

Four presets cover the most common work styles:

Preset	Work	Break	Long break	Streak
Classic	25 min	5 min	15 min	after 4
Short	15 min	3 min	10 min	after 4
Long	50 min	10 min	30 min	after 2
Flow	90 min	20 min	30 min	after 1

“Classic” is the original definition, “Short” suits fragmented days, “Long” approximates ultradian rhythms (the 90-minute cycle of focused work documented in basic rest-activity cycle research), “Flow” matches Cal Newport’s “Deep Work” blocks. The auto-switch option in the settings accordion can be turned off — useful if you want to acknowledge each phase change manually rather than tipping into a break mid-thought.

When do I use multi-timers for cooking?

Cooking with multiple components is the most common multi-timer use case: pasta 8 minutes, broccoli 5 minutes, sauce 12 minutes — all in parallel, all with different end times. A classic kitchen timer can only run one at a time, app-store cooking timers often require account sign-up, the browser tab is the natural answer. Up to five parallel timers in this tool, each with its own label — the tab title shows the next ending timer in rotation, so a glance at the browser strip while chopping, stirring, or rinsing dishes is enough.

The Keep screen awake option in settings is gold for tablet cooking. It uses the Screen Wake Lock API, which has been stable across all modern browsers since 2025 (Chrome 84+, Firefox 126+, Safari 16.4+) — the screen does not sleep while the option is on and the tab stays focused. On tab switch the lock is automatically released to save battery.

HIIT intervals are the second multi use case: 45 seconds of sprinting, 15 seconds of rest, repeated. Instead of an app that prescribes a fitness league, you enter the exact durations that fit your training. The audio alarm between sprint and rest is configurable through the sound picker — “Beep” is minimal-distractive, “Bell” gives a clearer phase-end marker.

How accurate is an event countdown across time-zone changes?

The event countdown stores the target date as the local wall-clock input in the browser’s time zone. On submission the input YYYY-MM-DDTHH:mm is converted via new Date(datetime).getTime() into a UTC timestamp — that is, the second at which that wall-clock moment occurs in the browser’s current time zone. That second is absolute: if you change time zones while travelling, the countdown continues toward the same absolute moment.

Concrete example: you create a countdown to 31 December at midnight in Berlin (CET, UTC+1). The stored target timestamp is 31 Dec 00:00 UTC+1 = 30 Dec 23:00 UTC. If you fly to New York for New Year’s Eve (EST, UTC−5), the countdown still shows the same absolute remaining time — locally in New York it expires at 30 Dec 18:00 (which is 31 Dec 00:00 Berlin). If you want a New York-local midnight (00:00 EST = 05:00 UTC) instead, re-create the countdown after arriving or adjust the date input accordingly.

The same principle applies to daylight-saving transitions: the input is converted to an absolute UTC timestamp, the DST shift does not move the absolute moment. If you need a countdown that tracks an abstract “local time” concept (e.g. “always 6 PM Berlin regardless of time zone”), a time-zone tool is the right answer — that is outside the scope of a pure countdown timer.

What are the tool’s limits?

The tool intentionally does not ship: no cloud sync across devices (Privacy Hard Cap §7, no server, no account), no productivity statistics or charts (stats-SaaS territory, not timer-tool), no task or to-do list (Pomofocus / TickTick scope), no user-uploaded sounds (privacy + UI complexity, the preset list is enough), no voice alarm (Web Speech API is a phase-2 backlog item if demand emerges). The Pomodoro streak is not day-bound — if you keep working past midnight the counter keeps incrementing without a day reset; if you want a daily-resetting streak, reset it manually.

System notifications are optional and opt-in. The tool does not auto-prompt for permission on page load — permission prompts interrupt flow and are themselves a UX anti-pattern. Instead, the Enable button lives in the settings accordion. If you use system notifications you must also have granted permission in your browser site settings; if browser permission is “denied” the tool shows a corresponding message and the audio alarm remains the only signal.

Wake Lock only works while the tab is in the foreground. On tab switch the lock is automatically released to save battery — that is standard browser behaviour and W3C-specified. If you need the screen awake even with a hidden tab, you need an installed program — a browser tool cannot deliver that.

What related tools are there?

The countdown timer is part of a time-tool family. The age calculator computes age from a birth date with a method toggle between BGB §187 and pragmatic counting. The date calculator returns the days between two dates or the date N days from now — complementary to the event countdown when you need not “how long” but “which date”.

The time-zone converter translates concrete clock times between zones — the companion to the event countdown when your event is a local time in a foreign zone (e.g. “live stream 2 PM PST”). The Unix timestamp converter is the developer variant of a time tool, mapping between UTC seconds and wall-clock strings.

If you want the Pomodoro mode as its own dedicated page, use the Pomodoro tab here for now — a separate pomodoro-timer slug is in the backlog pipeline but will only be built when GSC data shows the Pomodoro query has enough volume to justify its own slug.