A highly customizable productivity timer built to enforce effective study habits. It features strict timeboxing rules, immersive atmospheric effects, and full aesthetic control via TypeScript and Tailwind CSS.
- Live Demo Link: https://e3prime.github.io/pomodoro
Features a calming particle atmosphere and a circular progress ring that visualizes time remaining.
This application is a study companion designed to keep users in a state of flow. Built with TypeScript, it enforces specific "productivity rules" to ensure breaks don't turn into distractions.
Users can toggle between three modes, pause/reset the timer, and customize the look and feel of the application to match their personal aesthetic (Minimalist, Cyberpunk, or Classic).
- Strict Timeboxing Logic:
- Pomodoro: Flexible focus time (1 - 99 minutes).
- Short Break: Enforces a 15 - 30 minute window.
- Long Break: Enforces a 30 - 60 minute window.
- Validation: Prevents invalid inputs (blank, zero, out-of-bounds, or characters) with custom error messages.
- Immersive Visuals:
- Canvas Particles: A background system of rotating, floating particles creates a "Focus/Chill" atmosphere.
- Circular Progress Bar: A dynamic SVG ring depletes in real-time, pulsing and fading out when the timer hits zero.
- Audio Feedback: Plays a distinct sound effect upon completion to alert the user.
- Full Customization (Settings Modal):
- Fonts: Select between 3 distinct typefaces (Modern, Futuristic, Fancy).
- Colors: Choose a primary accent color that updates the progress bar and active UI elements instantly.