Pomodoro Timer — Focus & Break Tracker

Most timers give you a countdown and nothing else. This one structures the countdown into a cycle: 25 minutes of focused work, a 5-minute breather, and a longer 15-minute rest after every fourth session. That rhythm is the Pomodoro Technique, and it works because the breaks are mandatory rather than optional. Knowing a rest is coming in 25 minutes makes it easier to stay on a single task until the ring fills.

Every number is adjustable. The gear icon opens a settings panel where you can shorten the focus block to 20 minutes for lighter work, lengthen it to 50 for deep-coding stretches, set how many sessions earn a long break, and turn on auto-start so the next phase begins the moment the previous one ends. Changes take effect immediately and reset the current round cleanly.

Nothing leaves the browser tab. The session count resets when you close the page, which is intentional: the point of a daily count is the day, not a running total you carry around.

Running Your First Cycle

1. Press Start. The ring begins filling from the top; the phase tab shows Focus in terracotta.
2. When 25 minutes expire, the alert you picked under Sound & alerts rings until you click and the timer switches to Short Break. One session dot fills orange.
3. Press Start again (or enable Auto-start breaks in settings to skip this step). The ring now fills green over 5 minutes.
4. Repeat until all four session dots are filled. The next transition lands on Long Break instead of a short one.
5. The Skip button advances immediately to the next phase without waiting — useful when you finish early or need to cut a break short.
6. The Reset button returns the current phase to its full duration and stops the timer without clearing the session count.

What Each Counter Measures

• Sessions today counts how many complete focus blocks you have finished since opening the page. It does not persist across reloads, by design.
• Deep focus converts that count into hours and minutes — at the default 25-minute block, 4 sessions shows 1h 40m. Change the work duration in settings and the figure recalculates.
• Next long break tells you how many focus sessions remain before the long rest fires. At the default of 4 sessions per cycle, finishing one session when you are on 3 of 4 shows 1 left.

Browser Tab Behaviour and Performance Notes

• Sound uses the Web Audio API rather than an audio file, so there is nothing to download and nothing to block. A short tick plays during the last 5 seconds of a work phase; a three-note chord plays on completion of any phase.
• Browsers suspend the AudioContext until the user has interacted with the page. Pressing Start counts as that interaction, so sound works from the first session without any extra permission prompt.
• The bell icon in the toolbar mutes all audio immediately without opening settings. Pressing it again restores sound.
• The timer counts down against the clock, not by ticks, so a session ends on time even while you work in another tab, where browsers slow timers down. With Notify me in other tabs on, a system notification appears too, and the tab title flashes until you come back.
• The phase tabs are disabled while the timer is running. Switching phases mid-session requires pressing Pause first, which prevents accidental resets during deep work.