Designing a Better Pomodoro Timer for ADHD and Deep Work

There are thousands of Pomodoro timers on the web. Most of them are functional, utility-driven, and incredibly boring. When building the Pomodoro experiment for vishva.lol, I wanted to create something that didn't just track time, but actually put you into a state of deep work.

The result is an aesthetic, full-screen study cockpit combining the Pomodoro technique with lofi music, ambient soundscapes, and cinematic video backdrops.

The Psychology of the Pomodoro

Invented by Francesco Cirillo in the late 1980s, the Pomodoro Technique involves working for 25 minutes, then taking a 5-minute break. For people with ADHD or those struggling with procrastination, the power of the technique lies in removing the decision to start. The timer is the decision. You don't need to commit to finishing a huge project; you just need to commit to 25 minutes.

However, staring at a ticking clock can cause anxiety. The UI needs to be present, but receding. That's why I designed the timer to be bold but visually harmonious with the background, using soft typography and low-contrast borders.

Layering Audio with the Web Audio API

Audio is the quickest hack to changing your brain state. Some people need absolute silence; others need the chaotic noise of a coffee shop.

Using the Web Audio API, the Pomodoro app allows users to layer sounds. We stream a continuous lofi hip-hop track, and then give the user sliders to mix in rain, forest sounds, or binaural beats.

Technically, this involves creating multiple AudioContext nodes. We route the ambient loops through GainNodes linked to the UI volume sliders. The complexity lies in managing browser autoplay policies, which require the user to interact with the DOM (like clicking the "Start" button) before the AudioContext is allowed to resume.

Cinematic Video Backdrops

A static background is fine, but a slowly looping video creates a sense of time passing gently. I curated a set of looping videos (a rainy street, a cozy library, deep space) and set them as the background. The tricky part is ensuring they don't consume too much bandwidth or CPU power.

We use highly compressed WebM files, muffled by CSS overlays and backdrop filters, so they feel like part of the UI rather than a distracting movie.

State Management

Under the hood, the entire timer operates as a finite state machine (FSM). It transitions fromIDLE to POMODORO to SHORT_BREAK. By modeling the app this way, it becomes trivial to implement features like "auto-looping" or dynamically changing the duration of the next phase.