🍅 Pomodoro Timer
Stay focused with work/break intervals. Customize durations to fit your flow.
Customize Intervals
📋 When to Use the Pomodoro Timer
Students use the Pomodoro Timer to structure study sessions — 25 minutes of focused reading followed by a 5-minute break to process and retain information. Developers run deep-work blocks for coding sprints; the visual ring and audio beep signal when to step away from the screen. Writers break writing sessions into manageable 25-minute sprints to maintain momentum without burnout. Remote workers combat the blurred line between work and rest by enforcing structured intervals — the timer acts as an external accountability partner. Exam candidates simulate test conditions with timed work blocks and short breaks to build endurance. Anyone prone to procrastination uses the 25-minute commitment trick — starting is easier when you only need to focus for a short, defined window. The Pomodoro Technique was developed by Francesco Cirillo in the late 1980s using a tomato-shaped kitchen timer (pomodoro = tomato in Italian), hence the name and 🍅 icon.
⚙️ How the Pomodoro Timer Works
The timer uses the browser's requestAnimationFrame API paired with performance.now() for wall-clock-accurate countdown. On each animation frame (roughly every 16 milliseconds), the timer computes elapsed time as (currentTime − startTime) / 1000 + pausedDuration and updates the remaining seconds display and the circular progress ring. Unlike setInterval, this method stays synchronised to real time — if a frame is dropped, the next tick catches up.
Work/Break cycle: Sessions alternate between work mode (default 25 minutes) and break mode (default 5 minutes). When a work session ends, the timer plays a two-tone beep via the Web Audio API (synthesised in real time — no audio files downloaded), triggers a browser notification (or an alert dialog as fallback), and automatically switches to break mode. Press Start to begin the break. When the break ends, the timer beeps again and switches back to work mode. This cycle repeats indefinitely — there is no built-in session counter for the classic 4-pomodoro-then-long-break pattern; you track cycles manually.
Background tab behavior: requestAnimationFrame pauses when the browser tab is hidden or minimized. When you return to the tab, the timer recalculates the elapsed time from the wall-clock difference and jumps to the correct remaining time — the countdown stays accurate on refocus. However, if a session ends while the tab is in the background, the beep and notification are delayed until you return — the timer will not alert you until the tab is visible. For uninterrupted alerts, keep the tab active or enable desktop notifications (the browser delivers those even when the tab is backgrounded).
Settings and persistence: Work and break durations are adjustable (1–120 minutes for work, 1–60 for breaks) via the ⚙️ Settings panel. Duration preferences and the current timer state are not saved across page reloads — refreshing the page resets the timer to defaults and clears any running session. The dark/light theme preference is the only setting persisted (in localStorage).
How to Use the Pomodoro Timer
1. Set your intervals. Click the ⚙️ Settings button to customize your work duration (default 25 min) and break duration (default 5 min). Adjust these to match your personal focus rhythm.
2. Start a work session. With "Work" selected in the tab bar, press "Start." The visual ring counts down — focus on one task without distractions until the timer ends.
3. Take your break. When the timer beeps, it automatically switches to break mode. Step away, stretch, hydrate. The timer starts counting down your break immediately.
4. Repeat the cycle. After the break ends, the timer switches back to work mode. Press Start to begin your next focus session. Aim for 4 cycles before a longer break.
Frequently Asked Questions
What is the Pomodoro Technique?
Developed by Francesco Cirillo in the late 1980s, the Pomodoro Technique divides work into 25-minute focused intervals ("pomodoros") separated by 5-minute breaks. After completing four pomodoros, you take a longer 15–30 minute break. The method helps sustain concentration, reduce mental fatigue, and make large tasks feel manageable. This timer automates the work/break rhythm — start it, focus on one task, and let the beep tell you when to stop.
Can I change the timer durations?
Yes. Open the ⚙️ Settings panel to adjust the work duration (1–120 minutes, default 25) and break duration (1–60 minutes, default 5). Click Apply to save the new durations for the current session. Some people prefer 50-minute work blocks with 10-minute breaks, while others use shorter 15/3 splits for quick tasks. Duration preferences are not saved across page reloads — they reset to the defaults when you refresh.
Does the timer stay accurate when the tab is in the background?
Partially. The timer uses requestAnimationFrame, which pauses while the tab is hidden. When you return, it recalculates the elapsed time from the system clock and jumps to the correct remaining time — so the countdown is accurate on refocus. However, if a session ends while the tab is backgrounded, the beep and notification are delayed until you switch back. Enable desktop notifications in your browser if you need alerts while working in other tabs.
Will I get notified when a session ends?
Yes. When a work or break session finishes, the timer plays a two-tone beep (synthesised via the Web Audio API — no audio files downloaded) and sends a browser notification showing "Work session complete!" or "Break is over!". If you haven't granted notification permission, the timer requests it on your first click. If notifications are blocked, a standard alert dialog appears instead.
Does the timer remember where I left off if I close the tab?
No. The timer does not save its state — remaining time, pause position, or current mode — to any persistent storage. Closing or refreshing the tab resets the timer to the default work duration. Only the dark/light theme preference is remembered. If you need session tracking across page loads, keep the tab open.
Does it track the 4-pomodoro cycle for a long break?
No. This timer alternates work → break → work → break indefinitely. It does not count how many work sessions you've completed and does not automatically trigger a longer break after four cycles. You can track pomodoros manually and switch to a longer break by adjusting the break duration in Settings when needed.