Deep Focus

About Deep Focus

Deep Focus is a Pomodoro timer for people who want the technique without the subscription. It is a single web page — one HTML file, one stylesheet and one script — and a first load transfers about 38 KB compressed, of which under 15 KB is JavaScript gzipped. It runs offline after that first load, because a service worker caches the whole app, and no account is required. Every control is documented: Space starts or pauses, S skips the session, R resets it, F toggles distraction-free fullscreen and T switches themes. The three ambient soundscapes are synthesized in your browser with the Web Audio API, so there are zero audio files to download. Sessions, tasks and settings persist in localStorage, roll over at midnight America/New_York, and can be exported to JSON at any time.

How to use Deep Focus

1. Add a task (optional). Type what you plan to work on and estimate how many pomodoros it will take, then select it so completed focus sessions are counted against it.
2. Press Start, or hit the Space bar. The first time you start a session your browser asks whether Deep Focus may show notifications. Permission is never requested on page load, only on that first Start.
3. Work until the ring closes. The countdown is derived from the timestamp the session will end at, so it stays exact even if you switch tabs or your laptop throttles the page.
4. Take the break. A gentle chime plays and a notification appears. By default the short break starts on its own; after four focus sessions you get the 15 minute long break instead.
5. Shape the queue. The session queue shows what is coming next. Reorder it with the arrow buttons or by dragging, add extra focus blocks, or rebuild it from your settings.
6. Turn on ambience if it helps. Pick brown noise, rain or cafe from Settings and set its volume independently of the chime.
7. Review your stats. The heatmap, the 14-day bar chart, your current streak and your total focused hours are all computed from the sessions stored in this browser.
8. Export before you switch devices. Settings has a JSON export and import so your history travels with you.

Features

• Configurable cycles. Focus, short break, long break and the number of sessions before a long break are all adjustable. The defaults are 25, 5 and 15 minutes, with a long break every 4 sessions.
• Drift-free countdown. Remaining time is always computed as the difference between the stored end timestamp and the current clock, never accumulated from an interval.
• Reorderable session queue. Drag entries or use keyboard-accessible arrow buttons to plan an unusual sequence.
• Estimated versus actual pomodoros. Each task carries an estimate and a running count of the focus sessions actually spent on it.
• Daily log. Finished sessions and completed tasks roll into a log for the current day, which resets at midnight America/New_York.
• 12-week heatmap and 14-day bar chart. Contribution-style squares of focused minutes plus a daily bar chart, current streak and lifetime focused hours.
• Three generated soundscapes. Brown noise, rain and cafe are synthesized live with the Web Audio API. There are no audio files in the bundle.
• Gentle chime with a volume slider. A soft three-partial bell rings on completion, at whatever volume you choose, or not at all.
• Optional title-bar countdown. Keep the remaining time visible in the browser tab while you work in another window.
• Warm light and true-black themes. The dark theme uses real #000000, which saves power on OLED screens.
• Distraction-free fullscreen. One key hides everything except the ring and the controls.
• Installable, offline-first PWA. A service worker caches the app so it opens with no network at all.
• JSON export and import. Your sessions, tasks and settings are yours to move or back up.
• Keyboard operable throughout. Visible focus rings, semantic landmarks and WCAG 2.1 AA text contrast in both themes.

Frequently asked questions

Does Deep Focus work offline?

Yes. Deep Focus registers a service worker on your first visit and caches the whole app: one HTML page, one stylesheet, one script, the icons and the manifest. After that first load it opens and runs with no network connection at all. Because every timer, task and statistic is computed in your browser from data in localStorage, there is nothing to fetch from a server. You can also install it from your browser's address bar and launch it like a native app.

Does the timer stay accurate if I switch to another tab?

Yes. Deep Focus stores the exact timestamp at which a session will end and derives the countdown from the current clock on every repaint, so it never accumulates drift from throttled timers. If your browser suspends background tabs, the display re-synchronizes the instant you come back and any session that finished while you were away is recorded with its real end time. Browsers may still delay the completion notification for a tab that has been hidden for a long time, but the recorded session length is unaffected.

What data does Deep Focus store, and where?

Everything stays in your browser's localStorage on this device: your settings, your session queue, your task list and the history of completed sessions. Nothing is sent to a server, there is no account, no sign-in and no cookie that identifies you. You can export all of it to a JSON file at any time from the Settings panel and import it into another browser, and clearing your browser data for this site erases it permanently.

How do the three soundscapes work if there are no audio files?

Brown noise, rain and cafe are synthesized live with the Web Audio API. Brown noise is an integrated noise buffer played on a loop, rain is filtered noise driven by a slow-moving band-pass filter plus randomized droplet transients, and cafe layers a low rumble with band-passed chatter bursts and occasional cup clinks. Because the browser generates the sound mathematically, there is no audio to download and the soundscapes keep working offline like the rest of the app.

Can I customize the Pomodoro lengths and the session order?

Yes. The Settings panel lets you set the focus length, the short break, the long break and how many focus sessions happen before a long break; the default is 25 minutes of focus, a 5 minute short break and a 15 minute long break every 4 sessions. The session queue below the timer shows what is coming next, and you can reorder, add or remove entries with the arrow buttons or by dragging, so a single long stretch or an unusual pattern is easy to set up.

How was this game made?

Deep Focus was generated from a single written prompt on Quodara, an AI agent platform that turns a prompt into a deployed web app, and it was deployed straight from that prompt with no hand-written code afterwards. The full write-up, including the exact prompt, is published on the Quodara case page at https://quodara-ai.com/showcase/deep-focus/.

About this build

This version of Deep Focus was generated from a single prompt on Quodara on August 24, 2026, and deployed without any hand-written code afterwards. A first load transfers about 38 KB compressed in total, of which under 15 KB is JavaScript gzipped, and every subsequent visit is served from the service worker cache. There are no third-party frameworks, no web fonts and no blocking third-party scripts on the critical path. The full write-up of how it was built lives at https://quodara-ai.com/showcase/deep-focus/.