DEV Community

Cover image for 🍅 Building a Pomodoro Timer That Cosplays: My ADHD-Fueled Kiroween Journey
Natalie Gil
Natalie Gil

Posted on

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

#kiro #hookedonkiro #kirodotdev

@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:

  1. Download a beautiful, minimalist Pomodoro timer
  2. Use it for exactly 2 days
  3. Get bored
  4. 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();
};
Enter fullscreen mode Exit fullscreen mode

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:

  1. Novelty: 5 different experiences keep it fresh
  2. Structure: Pomodoro technique still enforces focus
  3. Discovery: Hidden triggers create rewarding moments
  4. Personality: Each mode has unique vibes
  5. 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

💭 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... 👀

Top comments (0)