A beautiful, interactive Pomodoro timer built with Next.js 16 and React 19.
Live at https://pomomodoro.vpardos.dev
- Pomodoro Timer — Work/short break/long break phases with stunning visual feedback
- Customizable Durations — Configure work, short break, long break durations and long break interval
- Circular & Linear Progress — Two timer visual styles with phase-specific glow effects and breathing animations while running
- Ambient Background — Subtle, slowly drifting gradient blobs that shift with the current timer phase
- Sound Notifications — Sound on phase transitions
- Browser Notifications — Notifications on phase changes
- Alarm System — Schedule alarms for specific times with sound/notification alerts
- Task System — Track up to 5 tasks with check-to-complete, bouncy animations, and fluid interactions
- Theme System — Light/dark/OLED modes with 13 color palettes
- Glassmorphism UI — Cards with hover lift, backdrop blur, and smooth transitions throughout
- Smooth Scrolling & Custom Scrollbar — Themed, thin scrollbars across all browsers
- Settings Persistence — All settings saved to localStorage
- Dynamic Page Title — Shows remaining time and current phase in browser tab
- Multilingual — Full English and Spanish UI translations with a language switcher (see Internationalization)
- Node.js 18+
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/vpardoss/Pomomodoro.git
cd Pomomodoro
# Install dependencies
npm install# Start the development server
npm run devOpen http://localhost:3000 in your browser.
# Create production build
npm run build
# Start production server
npm start# Run ESLint
npm run lint- Framework: Next.js 16.2.10 with App Router
- UI Library: React 19
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui v4 with @base-ui/react
- Icons: lucide-react
- Internationalization: next-intl
- Language: TypeScript
The app includes a rich set of custom CSS keyframe animations defined in src/app/globals.css:
animate-fade-in-up— Staggered card entrance animationsanimate-breathe— Subtle scale pulsing on the timer while runninganimate-pulse-ring— Expanding ring effect on the current session dotanimate-blob-drift— Slow ambient background blob movementanimate-slide-in-right— List item entry animationsanimate-spring-scale— Bouncy pop-in effectanimate-float— Gentle floating motion for empty statesanimate-shimmer— Linear gradient sweep effect
13 carefully crafted palettes are available:
Catppuccin: Latte, Frappé, Macchiato, Mocha Nord: Polar Night, Snow Storm, Frost, Aurora Extras: Dracula, Solarized Light, Solarized Dark, Tokyo Night, Rosé Pine
Each palette is dynamically applied via CSS custom properties using OKLCH (Catppuccin) or hex values (custom palettes).
Pomomodoro is fully translated into English and Spanish using next-intl. The UI language is selectable from the topbar language switcher, and the choice is remembered across visits.
- Supported locales:
en(English, default) andes(Spanish) - Routing: Locale is always prefixed in the URL —
/enand/es(configured withlocalePrefix: 'always') - Persistence: The selected locale is stored in a cookie (1-year expiry) so it survives reloads
- Translation files:
messages/en.jsonandmessages/es.json - Configuration:
src/i18n/routing.ts(locale list, default, prefix, cookie) andsrc/i18n/request.ts(server-side message loading)
- Create
messages/<locale>.jsonby copyingmessages/en.jsonand translating the values (keep the keys intact). - Add the locale code to the
localesarray insrc/i18n/routing.ts. - Add a display name for the locale under the
LocaleSwitcherkey in bothmessages/en.jsonandmessages/es.json(and the new file).
The language switcher in the topbar automatically picks up any locale listed in routing.locales.
MIT
- Catppuccin — Themes
- Dracula — Themes
- Nord — Themes
- Solarized — Themes
- Tokyo Night — Themes
- Rosé Pine — Themes
- shadcn/ui — Components
- Next.js — The React framework
- Tailwind CSS — CSS framework