Pomodoring

A Pomodoro timer that wears costumes. Konami Code = 8-bit terminal. Triple-click coffee = cozy café. Complete 4 sessions = fight a Procrastination Dragon. It's a shape-shifter that makes focus fun.

Comment

🎃 Inspiration

As someone with ADHD, I struggle with traditional productivity tools - they're boring, sterile, and my brain craves novelty. A few days ago, I started building a Pomodoro timer for myself, but I knew a plain timer wouldn't hold my attention. So I asked myself: what if my timer could transform itself - like wearing different Halloween costumes - to keep my focus sessions fresh and engaging?

The idea clicked: each time I use it, it could be a retro arcade game, a cozy coffee shop, or an epic RPG dungeon. The variety keeps my ADHD brain interested, while the structure of the Pomodoro Technique keeps me productive.

🍅 What It Does

Pomodoring is a Pomodoro timer with 5 hidden "costumes" that completely transform the user experience:

  • 🎮 Pixel Mode: Type the Konami Code (↑↑↓↓←→←→BA) and the entire app becomes an 8-bit retro terminal with green phosphor display and square wave sounds
  • ☕ Coffee Shop Mode: Triple-click the coffee icon to enter a randomly-generated café with lo-fi ambiance and steam wand sound effects
  • 🧙‍♂️ Gandalf Mode: Click the tomato 5 times or type "you shall not pass" to summon an epic wizard who blocks your distractions
  • 🗡️ RPG Dungeon Mode: Complete 4 Pomodoros to unlock a terminal-style dungeon crawler where you fight the Procrastination Dragon and gain Focus XP
  • ⏰ Time Travel Mode: Type /timetravel to access a secret interface that lets you restore previous timer states

Each costume changes the UI, sounds, animations, and interaction style while maintaining full timer functionality. The novelty helps my ADHD brain stay engaged, while the timer structure keeps me on track.

🛠️ How I Built It

I built this over a few days, adding costumes as I went. Each time I completed a Pomodoro session, I'd reward myself by building a new easter egg!

Tech Stack:

  • React + TypeScript for component architecture
  • Tailwind CSS for rapid styling and theme switching
  • Web Audio API for custom sound generation (no audio files!)
  • shadcn/ui for accessible UI components
  • Vite for fast development

Key Technical Implementations:

  1. Dynamic Sound Generation: Instead of using audio files, I used the Web Audio API to generate sounds programmatically. Each mode has unique sounds - 8-bit square waves for Pixel Mode, steam wand hissing for Coffee Shop Mode.

  2. State Management: Managing multiple simultaneous easter eggs without breaking the core timer functionality required careful state isolation and effect cleanup.

  3. Konami Code Detection: Implemented a custom hook to detect the classic ↑↑↓↓←→←→BA sequence using keyboard event listeners.

  4. Time Travel: Built a state history system that snapshots the timer state every 5 seconds, allowing users to "rewind" to previous moments.

🎯 Challenges I Faced

Performance: Multiple animated modes running simultaneously could cause lag. Solved by using CSS transforms and optimizing re-renders with React.memo and useCallback. Sound Design: Creating pleasant notification sounds without audio files was tricky. Experimented with different oscillator types (sine, square, sawtooth) and frequency ramps. Easter Egg Discovery: Balancing between hiding the easter eggs and making them discoverable. Added subtle hints and a dedicated easter eggs page. Cross-browser Compatibility: Web Audio API behaves differently across browsers. Had to add fallbacks and test extensively. Staying Focused: Ironically, building a focus tool while having ADHD! The costumes helped - I'd use the timer to build the timer 🍅

🧠 What I Learned

Web Audio API is incredibly powerful for creating dynamic sound effects without external files Easter eggs can significantly increase user engagement, especially for neurodivergent users who need variety TypeScript's type safety is crucial when managing complex state interactions Accessibility matters even in playful features - all modes maintain keyboard navigation and screen reader support The Pomodoro Technique actually works for ADHD! The costumes provide the novelty my brain needs, while the structure keeps me productive Building tools for yourself first makes them more authentic and useful for others

🚀 What's Next

Add more costumes (Space Mode, Underwater Mode, Matrix Mode) Multiplayer focus sessions with friends (accountability for ADHD!) Achievement system for unlocking new costumes Custom sound themes and user-created modes Mobile app version with haptic feedback Statistics dashboard to track productivity over time ADHD-friendly features like hyperfocus mode and break reminders

Built With

Share this project:

Updates