FocusTama

A retro virtual pet that grows with your focus! Complete Pomodoro sessions to keep it happy. A fun, gamified way to beat distractions and stay productive.

Comment

🎯 Inspiration

In today's fast-paced digital world, productivity often comes at the cost of well-being. We use timers and to-do lists that are cold and unforgiving, leading to burnout and a feeling of being disconnected from our work.

We were inspired by the "Blast from the Past" theme to look back at the 90s, a time when digital interaction felt more personal and whimsical.
We asked ourselves: What if we could revive the emotional connection of a Tamagotchi and apply it to the modern problem of digital burnout?

The "Tamagotchi effect" shows that humans form genuine emotional bonds with virtual pets. We wanted to harness this connection to improve productivity and mental health.

Thus, FocusTama was born—a productivity companion you care for by caring for yourself.

🐾 What It Does

FocusTama is a web-based, AI-powered virtual pet that gamifies focus and encourages healthy work habits. At its core, it's a fully-featured productivity app—with a heart.

  • 🧸 A Living Pet:
    Users care for a pixel-art puppy whose happiness, hunger, and energy reflect their focus. A focused user has a happy pet.

  • ⏳ Gamified Pomodoro Timer:
    Add tasks to a to-do list and start a focus session. Completing sessions rewards the pet and user, creating a positive feedback loop.

  • 🍎 Interactive Care:
    Users can "feed" their pet from a break-time inventory. Each food item has a unique effect, encouraging healthy breaks.

  • 🧠 Conversational AI:
    Powered by Google Gemini, the pet engages in two-way conversation—offering jokes, encouragement, or productivity tips.

  • 🌱 Long-Term Growth:
    The pet evolves after every 5 focus sessions. A Focus Streak Graph (inspired by GitHub) tracks 70 days of consistency.

  • 🌗 Immersive Experience:
    Features a dynamic day/night cycle, nostalgic retro UI, and 8-bit sound effects—bringing the world of FocusTama to life.

🏗️ How We Built It

FocusTama was built from the ground up using core web technologies and no frameworks.

  • Frontend:
    HTML5, CSS3, and modern JavaScript (ES6+). Entirely client-side for speed and accessibility.

  • Graphics & Animation:
    Animations rendered on an HTML <canvas>. We used custom 256×64 sprite sheets and cycled frames with requestAnimationFrame.

  • Styling:
    Retro feel via CSS variables, Flexbox, and Grid. A Base64-encoded custom cursor completes the 90s aesthetic.

  • AI Integration:
    Connected to Google Gemini API (gemini-1.5-flash-latest) using a secure fetch call. API keys are stored securely via config.js and Vercel Environment Variables.

  • State Management:
    A centralized state object tracks everything—tasks, pet status, inventory, settings. Auto-saved to localStorage every 5 seconds and robustly merged on load.

🐞 Challenges We Ran Into

  • 🧟‍♂️ The "Zombie Timer" Bug:
    Reloading mid-session locked the UI while the timer ran invisibly. Fixed by resetting the session state on every page load.

  • 🔇 "Silent Success" Audio:
    Modern browsers block auto-played sounds. We moved the sound to trigger on the "Start Break" click to comply and improve UX.

  • ⚙️ AI API Integration:
    Faced 400 errors due to outdated model names. After debugging and updating to gemini-1.5-flash-latest, integration worked smoothly.

🏆 Accomplishments That We’re Proud Of

  • ✅ Framework-Free State Machine:
    Robust management of tasks, timers, and UI without external libraries.

  • 💬 Real AI-Powered Companion:
    Seamless integration with Gemini API created a responsive, helpful virtual pet.

  • 🎮 Deep Gamification:
    From evolution to inventory to focus streaks, every element keeps users motivated.

  • ✨ A Polished, Immersive Experience:
    From retro visuals and sound to smart feedback systems, every detail feels alive.

📚 What We Learned

  • 🧠 Strong State Design Is Critical:
    The entire experience relies on predictable and stable state transitions.

  • 🕹 Async JavaScript Mastery:
    Working with fetch, async/await, and error handling taught us about real-world API challenges.

  • 🎨 "Game Feel" Matters:
    Sound effects, animations, and small UX touches are essential for user delight—not just decoration.

🚀 What’s Next for FocusTama

  • 🛍 The Focus Shop:
    Users earn "Focus Coins" to buy pet accessories (hats, scarves) or retro UI themes. We might also collaborate with brands in future to get discount on their products using these focus coins.

  • 🎲 More Mini-Games:
    New activities during breaks to boost happiness and relaxation.

  • 🥇 Weekly Goals & Achievements:
    Add challenges like "Complete 10 sessions" and unlock badges to encourage habit-building.

  • 🧩 Browser Extension:
    A lightweight companion that shows pet status and nudges users away from distractions.

FocusTama brings emotion, fun, and wellness into productivity.
It’s not just about getting things done—it’s about enjoying how you do it.

Built With

Share this project:

Updates