← All projects

07 · Web app · Productivity

Focus Tide

Pomodoro timer with ambient soundscapes

  • JavaScript
  • HTML
  • CSS
  • Vite
  • Web Audio
View code on GitHub ↗

Overview

A Pomodoro timer with ambient sounds: focus and break sessions paired with calming rain and soft background audio, animated rain and particle backdrops, and settings that persist between visits.

The problem

Staying focused for long stretches is hard, and a bare countdown does little to help you settle in — while switching between a timer and a separate ambient-sound app adds friction.

The solution

Focus Tide puts the timer and the atmosphere in one place: start a focus session and calming audio begins; take a break and the mood shifts; a chime marks the end of each session, across a four-session cycle.

Key features

01

Focus & break modes

Classic Pomodoro cycles with adjustable focus and break lengths, tracked across four sessions.

02

Ambient soundscapes

Rain and soft ambient tracks that play during sessions, with a volume slider and mute toggle.

03

Animated backdrops

Falling rain and drifting particles that set the mood for each mode.

04

Session chime

A gentle chime when a focus session ends and break mode is ready.

05

Keyboard shortcuts

Space to start or pause, R to reset.

06

Remembers your settings

Durations, volume, sound preference, and session progress are saved in local storage.

How it's built

  1. InterfacePlain HTML, CSS, and JavaScript, bundled with Vite.
  2. TimerA page controller that drives focus/break state, rendering, and shortcuts.
  3. AudioA small ambient-audio module for looping rain and soft tracks, volume, and the chime.
  4. StorageLocal storage for durations, volume, sound on/off, and the session count.

Challenges

Audio that behaves

Ambient tracks have to start, pause, stop, and switch with the timer's state without overlapping or jumping.

Accessible by default

Mode changes are announced for screen readers, and the controls carry proper labels and pressed states.

Outcome

A calm, self-contained focus tool that pairs the Pomodoro technique with ambience — no sign-up, no setup, just press Space.