A minimal, always-on-top Pomodoro timer overlay widget built with Tauri v2 and vanilla JavaScript. Designed to be unobtrusive and sit in the corner of your screen while you work. I went on an extensive search for something like this, only to realize it didn't exist. So I rage-coded it.
- 🎯 Always-on-top overlay - Stays visible above all other windows
- ⏱️ Classic Pomodoro technique - Focus sessions with short and long breaks
- 🎨 Three size modes - Small (240px), Medium (320px), Large (400px)
- 🔔 Audio notifications - Sound alert when timer phases complete
- 🎚️ Adjustable volume - Control notification volume (0-10)
- 📊 Visual progress ring - Animated border shows remaining time
- 🖱️ Frameless, draggable window - Clean design, drag from titlebar
- ⚙️ Customizable durations - Adjust focus and break times to your preference
- 💾 Persistent settings - Your preferences are saved between sessions
The app follows the Pomodoro Technique:
- Focus phase (default: 25 min) - Work on a single task
- Short break (default: 5 min) - Quick rest after each focus session
- Long break (default: 15 min) - Extended break after 4 focus sessions
The animated progress ring around the window shows time remaining. When a phase completes, you'll hear a notification sound and the timer automatically transitions to the next phase.
- Start/Pause button (center) - Begin or pause the current timer
- Reset button (↺) - Restart the current phase
- Skip button (⇥) - Jump to the next phase
- Settings button - Configure durations, volume, and window size
- Close button (×) - Exit the application
npm installRun the app in development mode with hot-reload:
npm run tauri:devBuild a standalone executable:
npm run tauri:buildThe compiled application will be located in src-tauri/target/release/.
Windows: src-tauri/target/release/pomodoro-timer-widget.exe
Click the "Settings" button in the app to adjust:
- Focus duration (1-60 minutes)
- Short break duration (1-30 minutes)
- Long break duration (1-60 minutes)
- Long break interval (every 2-10 focus sessions)
- Volume (0-10)
- Window size (Small/Medium/Large)
All settings are automatically saved when you make changes and will persist across app restarts. Settings are stored locally using the WebView's localStorage API.
- Replace or add your sound file at:
src/assets/sounds/notification.wav - Rebuild the application
- The sound will play when each timer phase completes
- Replace
src-tauri/icons/icon.pngwith your icon (recommended: 1024x1024px or larger) - Generate all platform-specific formats:
npm run tauri icon
- Rebuild the application
Note: Windows aggressively caches app icons. After rebuilding, you may need to clear the icon cache or restart to see the new icon.
- Frontend: Vanilla JavaScript, HTML5, CSS3
- Framework: Tauri v2 - Rust-based native app framework
- Build Tool: Vite 6.4
- Architecture: Pure state machine for timer logic (see timer.js)
pomodoro-timer-widget/
├── src/
│ ├── assets/
│ │ └── sounds/
│ │ └── notification.wav # Audio alert (user-provided)
│ ├── index.html # Main HTML structure
│ ├── main.js # UI orchestration and event handling
│ ├── styles.css # Styling with CSS variables for scaling
│ └── timer.js # Pure timer state machine logic
├── src-tauri/
│ ├── icons/ # Application icons (all formats)
│ ├── src/
│ │ └── main.rs # Rust entry point
│ ├── Cargo.toml # Rust dependencies
│ └── tauri.conf.json # Tauri configuration
├── vite.config.js # Vite bundler config
└── package.json # Node.js dependencies and scripts
- ✅ Windows 10/11 - Fully tested
⚠️ Linux - Should work, not yet tested- ❌ macOS - Not yet tested
MIT