Pomodoro Pixel Timer is a custom Pomodoro app built with React and Electron, featuring animated pixel-art characters that accompany users during their study and break sessions. The app includes a frameless, custom-designed window, character selection, and the ability to stay always on top for a distraction-free workflow.
- Custom Pomodoro Timer: Set your study time, break time, and number of rounds.
- Animated Pixel Characters: Choose from multiple characters, each with unique frame-based animations.
- Frameless Electron Window: A sleek, custom-designed UI with built-in close and minimize buttons.
- Always-on-Top Mode: Keep the app visible on top of other windows for better focus.
- Character Selection Carousel: Easily switch between characters before starting a session.
- Smooth UI & Controls: Pause, reset, and manually start breaks or study sessions.
-
Clone the repository:
- git clone https://github.com/ines-om/pixel-pomodoro
- cd pixel-pomodoro
-
Install dependencies:
- npm install
-
Run the app:
- npm run electron:dev
To create a standalone version of the app:
1️⃣ Build the React App
- npm run build
2️⃣ Package the App Using Electron Packager:
- npx electron-packager . PixelPomodoro --platform=win32 --arch=x64 --out=release-build --overwrite
- React (Frontend UI)
- Electron (Desktop App Framework)
- CSS & Bootstrap (Styling)
- React Router (Navigation)
- Node.js & IPC (Electron communication)
Set Study & Break Durations and Number of Rounds. Select Your Character from the animated carousel. Click Start to begin the Pomodoro session. The character animation will play during your study and break phases. Use Pause, Reset, and Manual Start to control the timer.
Modify the character frames in /assets/ to add new animations.
Adjust the window settings in main.js for transparency, resizing, or always-on-top behaviour.
Created by Inês O. Martins
GitHub: @ines-om
This project is licensed under the MIT License.