Focu

Turn focus time into Adventure time for your own creatures. Block distracting sites and earn Focus Points! Use them to train a team of creatures and battle your way through themed gyms.

Comment

Inspiration

It's 7 p.m. You sit down to study. It's suddenly 2 a.m., and you've learned a lot about what Stephanie was up to this past weekend on her Instragram stories but nothing about your midterm.

All three of us have been there more times than we'd like to admit. We've tried focus apps, timers, and site blockers, but they all share the same flaw: they're boring, and the only thing stopping you from turning them off is willpower. We realized the apps that actually keep us coming back every day aren't productivity tools. They're games. So we asked ourselves: what if staying focused was how you got better at a game?

What it does

Focu is a Chrome extension that turns focus time into power for a team of creatures.

You start an Adventure: pick how long you want to focus (5 to 180 minutes) and which distracting sites to block. Sites are grouped by category (social media, video, gaming, messaging, news, shopping), and blocking three or more from the same category unlocks a Temptation Bonus. The more tempting the sites you block, the more FocuPoints you earn. Block Instagram, TikTok and X for 25 minutes, for example, and you earn 500.

While the Adventure runs, those sites are really blocked. Try to visit one and you land on a Trail Closed page that shows how much time is left and how many FocuPoints you'd lose. You can still choose to leave, because we didn't want a blocker that traps you, but that ends the Adventure and you earn nothing.

FocuPoints only come from focus time. Spend them at the Training Centre to teach your Locklings (collectible fire, water and grass creatures) new moves. Then take your squad of three into turn-based battles against five Distraction Gyms, led by the habits we're all fighting: Notification Nell, Autoplay Al, Doomscroll Dana, FOMO Fiona, and the final boss, The Algorithm. Battles have type matchups, misses, healing moves and switching. Win, and you pick one of three Lockboxes for a new Lockling or move. The more you focus, the stronger your team gets, so your team is a literal record of the work you put in.

How we built it

Focu is a Chrome extension (Manifest V3). Site blocking uses Chrome's declarativeNetRequest API, and a background service worker with alarms keeps sessions accurate even if the browser is closed mid-session. Everything is stored locally in the browser, with no accounts and no servers. The interface uses React, TypeScript, Vite, Tailwind CSS, Zustand and Framer Motion. The battle rules live in a pure TypeScript engine with more than 80 automated tests covering damage, type matchups, the opponent AI and rewards.

With three people and Claude Code in one repo for 24 hours, we wrote a detailed spec first and treated it as the single source of truth. We agreed on shared interfaces up front, kept each person in their own files, built preset save files and a Demo Mode (60x speed) so anyone could jump to any game state, and ran a verify script (typecheck, tests, build) before every merge. Claude Code wrote a lot of the code, but we reviewed every plan and tested everything in real Chrome.

THE ART IS NOT AI SLOP ! IT'S HUMAN SLOP. For the visuals, we went with 2D creatures, bouncy airy animations and a cozy pastel doodle style. The creatures were hand drawn by us. Additionally a teammate painted the backgrounds: a meadow for the home screen and a different painting for each of the five gyms. We added sound effects for attacks, misses, healing and winning.

Challenges we ran into

  • Site blocking that never lies about your points: Chrome extension service workers go to sleep and timers aren't exact. A session has to end, award points and unblock sites exactly once, even if you quit Chrome halfway through. We combined alarms, a check from the page itself, a startup recovery step and a queue so two events can never double-award, then tested it by quitting Chrome mid-session.
  • Blocking only works in the real extension, so we couldn't test it on a local dev server. We also found that blocking amazon.com would have blocked aws.amazon.com, our own deploy console, so we added an exclusion.
  • Scoping: we had big ideas, including 3D creatures, multiplayer and automatic site categorization. We kept asking what the smallest version was that still felt fun, and protected the full loop: focus, earn, train, battle, reward.

Accomplishments that we're proud of

  • We shipped a working, playable game in 24 hours. The full loop works in real Chrome: real site blocking, FocuPoints, training, five gym battles against an AI opponent, and Lockbox rewards.
  • It's a whole game's worth of content: 9 original Locklings, 21 moves, 5 Distraction Gyms, and 37 sites across 6 categories, each gym with its own hand-painted background.
  • It looks and feels the way we hoped. The cozy pastel style is calm rather than stressful, and the creatures are genuinely cute.
  • It's an honest design. Focu never reads the pages you visit, there are no accounts or tracking, and you can always leave an Adventure if you really need to.

What we learned

  • How to work as a team in a shared Git repo under serious time pressure, and how much agreeing on interfaces first helps.
  • How to use AI coding tools well: write the spec, review the plan before the code, and test the result. AI is fast but can be confidently wrong, and tests and manual checks are what catch it.
  • A lot about game design. Making something rewarding without making it punishing is a real balancing act, from how many FocuPoints a minute is worth to how hard each gym should hit.
  • How the Chrome extension platform actually works, including its limits.

What's next for Focu

  • More Locklings, elements and gyms so there's always something new to work toward
  • Evolving Locklings that grow from your total focus hours
  • Streaks and stats so you can see your focus habits over time
  • Friends and study groups: challenge friends in battles and power a shared team with everyone's focus time
  • Automatic site categorization instead of our fixed list, plus scheduled Adventures and an "allow only these sites" mode
  • Accounts and sync, then mobile and other browsers, to block distracting apps on your phone, not just websites in Chrome

Try it yourself

Follow the instructions in Readme.md: https://github.com/mellli1231/mma_game

Tip if you'd like to try out all of Focu's capabilities: turn on Demo Mode in Settings and Adventures run 60 times faster, so a 25-minute Adventure takes 25 seconds.

Have fun :D

Built With

Share this project:

Updates

Submission history