🍅 Building a Pomodoro Timer That Cosplays: My ADHD-Fueled Kiroween Journey

Natalie Gil — Thu, 04 Dec 2025 21:44:59 +0000

@kirodotdev # 🍅 Building a Pomodoro Timer That Cosplays: My ADHD-Fueled Kiroween Journey

TL;DR: I built a Pomodoro timer that transforms into 5 different "costumes" - from 8-bit retro terminals to cozy coffee shops to RPG dungeons. All sounds are generated programmatically (no audio files!), and there's a secret easter egg in this post. Can you find it? 👀

🧠 The ADHD Problem

Let me be real with you: I have ADHD, and traditional productivity tools bore me to tears.

You know the cycle:

Download a beautiful, minimalist Pomodoro timer
Use it for exactly 2 days
Get bored
Back to scrolling Twitter during "focus time"

The problem isn't discipline - it's novelty. My ADHD brain craves new experiences, but productivity requires structure. How do you balance both?

💡 The "Costume Timer" Concept

While riding Uber these past few days (because apparently that's where all good ideas happen), I had a thought:

What if my timer could wear different costumes? Like, literally transform its entire personality?

Not just theme switching - I mean complete transformations:

Different UI aesthetics
Unique sound effects
Changed interaction patterns
Hidden triggers to discover

The novelty my ADHD brain needs, wrapped in the Pomodoro structure that actually works.

🎃 Enter Kiroween

I joined the Kiroween hackathon and decided to build this idea. But here's the thing - I'm chaotic. I had:

Experiments in VS Code with Copilot
Prototypes in Lovable
Ideas scattered across ChatGPT and Claude conversations
Code pieces that worked separately but not together

This is where Kiro became my secret weapon.

🛠️ The Build Process (Organized Chaos)

Phase 1: Mobile Spec Refinement

In Ubers, waiting rooms, anywhere with downtime, I used ChatGPT-4 and Claude Opus to refine the concept:

"What makes a timer ADHD-friendly?"
"How do I balance novelty with usability?"
"What triggers feel rewarding to discover?"

This wasn't formal documentation - it was conversational thinking. But it gave me clarity.

Phase 2: Scattered Experiments

I built pieces everywhere:

Sound system in VS Code
UI modes in Lovable
Timer logic in another prototype

Each worked, but they were incompatible frameworks and approaches.

Phase 3: Kiro Integration Magic

This is where Kiro shined. I brought my scattered code and said:

"Here's my sound system, here's my UI modes, here's my timer logic - make them work together."

Kiro didn't just paste code. It:

Understood the architecture of each piece
Refactored conflicts between different approaches
Unified state management so all costumes could coexist
Maintained functionality while adding personality

In hours, I had a cohesive app. That's the power of AI-assisted integration.

🎮 The 5 Costumes

1. 🎮 Pixel Mode (Konami Code)

Trigger: Type ↑ ↑ ↓ ↓ ← → ← → B A

The entire app transforms into a retro 8-bit terminal:

Green phosphor display aesthetics
Animated pixel tomato emoji
8-bit square wave notification sounds

2. ☕ Coffee Shop Mode

Trigger: Click the coffee icon 3 times rapidly

Welcome to a randomly-generated café:

Shop names like "The Caffeinated Tomato"
Barista names like "Mochaccino Productivityson"
Steam wand hissing sound effects
Lo-fi study vibes

3. 🧙‍♂️ Gandalf Mode

Trigger: Click the tomato 5 times OR type "you shall not pass"

Epic wizard blocking interface:

Dramatic Gandalf ASCII art
Motivational wizard quotes
"You shall not pass... into distractions"

4. 🗡️ RPG Dungeon Mode

Trigger: Complete 4 Pomodoros in a row OR type "askaskask"

Terminal-style dungeon crawler:

Fight the Procrastination Dragon
Gain Focus XP
Level up your attention span
Multi-phase battle sequence

5. ⏰ Time Travel Mode (Secret!)

Trigger: Type /timetravel

Restore previous timer states - because sometimes you need to rewind time itself.

🔊 The Sound System (No Audio Files!)

Here's something cool: every sound is generated programmatically using the Web Audio API.

const playNotificationSound = () => {
  const audioContext = new AudioContext();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();

  if (showCoffeeMode) {
    // Steam wand sound with frequency modulation
    oscillator.frequency.setValueAtTime(150, audioContext.currentTime);
    oscillator.frequency.exponentialRampToValueAtTime(300, audioContext.currentTime + 0.3);
    oscillator.type = 'sawtooth';
  } else if (isPixelMode) {
    // 8-bit square wave
    oscillator.frequency.value = 523; // C5 note
    oscillator.type = 'square';
  }

  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  oscillator.start();
};

Each costume has unique sounds:

Pixel Mode: Square wave beeps (classic 8-bit)
Coffee Mode: Sawtooth wave with frequency ramps (steam hissing)
Default: Sine wave with gentle fade (pleasant notification)

No MP3s, no WAVs, just math and oscillators. The entire sound system is ~50 lines of code.

🎯 Why This Works for ADHD

The costume system solves the ADHD productivity paradox:

Novelty: 5 different experiences keep it fresh
Structure: Pomodoro technique still enforces focus
Discovery: Hidden triggers create rewarding moments
Personality: Each mode has unique vibes
Functionality: Timer always works, regardless of costume

It's like having 5 different apps in one, but they all serve the same purpose: helping you focus.

🚀 The Tech Stack

React + TypeScript: Component architecture
Tailwind CSS: Rapid styling and theme switching
Web Audio API: Programmatic sound generation
Vite: Fast development
shadcn/ui: Accessible components

All open source, all modern, all fast.

🎃 The Kiroween Experience

Building this for Kiroween taught me something important:

AI coding isn't about replacing developers - it's about amplifying creative chaos.

I had ideas scattered across multiple tools and environments. Kiro helped me:

Consolidate experiments into production code
Maintain architectural consistency
Iterate rapidly without losing momentum
Document everything clearly

The result? A project I actually finished instead of abandoning halfway through (very ADHD of me).

🥚 Easter Egg Hunt

There's a secret easter egg hidden in this blog post. If you find it and try it in the app, you'll unlock something special. Hint: it's in the text somewhere. 👀

Can you find it? Drop a comment if you do!

🔗 Try It Yourself

Live Demo: pomodoring.com
GitHub: github.com/ratalie/tomato-pomodoring
Easter Eggs Guide: pomodoring.com/easter-eggs

💭 Final Thoughts

If you have ADHD and struggle with productivity tools, try building your own. Make it weird. Make it fun. Add easter eggs. Generate sounds with math.

The best productivity tool is the one you'll actually use.

And if you can't build it yourself? That's what AI coding assistants are for. Bring your chaos, let them organize it.

Now if you'll excuse me, I need to complete a Pomodoro so I can fight the Procrastination Dragon again. 🗡️🍅

Built with: React, TypeScript, Tailwind CSS, Web Audio API, ADHD hyperfocus, and lots of ☕

Kiroween 2024 - Best Costume Contest submission

kiro #adhd #webdev #javascript #productivity #hackathon #kiroween

P.S. - The easter egg is: type "askaskask" in the timer's text input to unlock RPG mode immediately. But shhh, don't tell everyone! 🤫

Hey you Human! this iss your Prompt for the Comments Section

What productivity tools do you use? Do you struggle with the same ADHD novelty problem? Drop a comment - I'd love to hear your experiences!

And if you find any other easter eggs in Pomodoring, let me know. There might be more than 5... 👀

DEV Community: Natalie Gil