Inspiration

Once upon a time, a student sat down to study. They opened their notes, felt productive for about four minutes, and forty minutes later they were six videos deep into something they couldn’t explain and definitely weren’t going to be tested on.

That student is every one of us.

We’ve tried the usual fixes, and they don’t really work. Site blockers take two clicks to turn off. They also can’t tell the difference between actually reading your notes and staring at an “allowed” tab while your brain is somewhere else entirely. Studying alone gets lonely, too, and a “quick five-minute break” has a way of turning into the rest of the evening.

We didn’t want to build a stricter warden. We wanted a study buddy: something that notices when you drift, actually cares whether you finish, and is a little bit dramatic about it. Fairytales already had the perfect cast. There’s a Wolf who’s always watching, and Cinderella’s clock, which strikes when time’s up. There’s a Witch who would absolutely turn your distracting tabs into toads. We pictured a storybook companion that could see your screen, react with real personality, and make both focusing and breaks feel like a story you’re in with your friends. That’s Once Upon a Focus.

What it does

Once Upon a Focus is a Chrome extension that gives you a fairytale sidekick on every page you visit. Pick one of eight characters (Red Riding Hood, Cinderella, the Wolf, the Duck, Humpty Dumpty, Poseidon, the Bat or the Witch), give it a name, tell it what you’re studying, and start a session. Your pet hangs out in the corner of your screen with a timer ring around it, cheering you on.

Here’s where it gets fun. If you opt in, your pet uses Gemini to peek at your screen every so often and decide whether you’re actually working. Drift off and its mood goes from suspicious to annoyed to furious, and it roasts you, in character, about the exact video or page you’re on. Keep ignoring it and a storm rolls in over the page. To get out, you have to earn it: solve a riddle, pass a quiz Gemini writes about your study topic, type an oath backwards, or beat a challenge a friend sent you. If you really need out, holding Esc for five seconds always works. Your pet will sulk about it, though.

It’s also a tutor. Turn on “look at my screen” and you can ask about whatever’s in front of you, whether that’s a diagram, an error message or a paragraph that makes zero sense, and Gemini answers from the screenshot.

And it’s social. The Study Table shows which friends are studying right now, so you can nudge them or send a challenge that pops up in their next lockdown. In a Group Study Room, everyone shares one chat with a Gemini “Study Spirit” that answers the whole group and makes shared flashcards and quizzes. When the Cinderella clock strikes break time, the Break Tavern opens. Play Spellbound (a fairytale word race), Tic-Tac-Toe or Connect Four against a friend or a matched stranger. You get an icebreaker based on what you’re both studying, and an add-friend button when the game ends.

How we built it

Once Upon a Focus is a Chrome Manifest V3 extension built with WXT, React 19 and TypeScript. The floating pet and the lockdown overlay live inside a Shadow DOM, basically a sealed-off bubble on the page, so they look the same on every site and never mess with the page underneath. A mood state machine with adjustable strictness controls how fast your pet loses its patience. The session timer runs on Chrome’s alarms, so it stays in sync across every open tab. Demo Mode speeds the timers up to seconds so we can show the whole experience live in a few minutes.

Gemini is the heart of the project: it’s both the pet’s eyes and its social brain. For vision, we send a downscaled screenshot to Gemini Flash and ask for a structured JSON verdict: are you on task, how sure is it, what are you doing, and a “roast hook” that feeds the character’s next line. The same pipeline powers the “look at my screen” tutor. On the social side, Gemini runs the group study rooms, writes the flashcards, quizzes, riddles and friend challenges, and comes up with the Tavern icebreakers. Every call works its way down a list of Gemini models. If none of them answer, a hand-curated “offline storybook” takes over, so nothing ever dead-ends.

The social features run on Firebase. Anonymous sign-in gives everyone an account with zero signup screens. Firestore holds friends, presence, nudges, challenges, study rooms, matchmaking and live games, all pushed to everyone in real time. Game moves run in Firestore transactions, so both players always see the same board. The bot opponent knows when to win, when to block, and when to slip up on purpose so you actually have a chance. We also hand-built all eight characters in SVG, each with seven poses, using one shared storybook palette so the whole cast looks like it came out of the same book.

Challenges we ran into

Chrome extensions fought us the whole way. Our Firebase backend runs in a hidden page that Chrome provides for background work, and it turns out those pages can’t touch the extension’s storage at all. Nothing threw an error. Our social features just quietly didn’t work until we tracked it down. We fixed it with a small bridge that routes every storage read and write through the extension’s main background script and sends change notifications back.

Then there was keeping Gemini alive on the free tier. Every model has its own small daily quota, and Demo Mode’s frequent screen checks chewed through our main model fast. At peak hours, some models would just hang, with no response and no error, and the tutor would give up and fall back to canned answers. So we rebuilt the AI layer. It now reads Google’s retry delays, rests models that are out of quota, puts a timeout on every attempt, and moves on to the next healthy model. We also moved screen checks and roasts to lighter, faster models, which left the bigger ones free for real questions.

The web itself had opinions too. Some sites rebuild their pages and wiped our widget right off the screen, so we taught it to reattach itself, and to re-add itself to open tabs whenever the extension updates. Our styling library and custom fonts don’t work inside a Shadow DOM, so we wrote our styles from scratch.

Our hardest design problem was tone. How do you make a pet that roasts you still feel like it’s on your side? And how do you keep the character voice from getting in the way when someone just needs a correct answer? Getting that balance right was hard to think of.

Accomplishments that we’re proud of

Honestly? We’re proudest that it’s funny. Gemini catches exactly what you’re watching, your character roasts you for it, and then the storm rolls in. It gets a laugh every time, and then it actually gets you back to work. It turned out to be accountability people want to leave on.

We’re also proud of how much we packed into one weekend: real-time multiplayer with shared study rooms, three turn-based games with matchmaking and a bot, friend challenges that show up inside someone else’s lockdown, and eight characters with their own personalities and full pose sets. And it doesn’t break. If Gemini goes down, the storybook takes over. If Firebase goes down, it switches to a local mode with demo friends and a bot. The demo works anywhere.

What we learned

Structured output was the biggest unlock for us. Asking Gemini for a strict JSON verdict instead of free text made screen-based focus detection reliable enough to build game logic on top of. It also let one screenshot do double duty as both a decision and a joke. We learned to assume the AI can fail at any second, and to design the fallback first instead of bolting it on later.

On the technical side, we got a crash course in how Manifest V3 splits an extension into separate pieces (background scripts, hidden pages, scripts injected into websites) and how much plumbing it takes to keep them all talking to each other. The lesson that stuck with us most, though, is that playful accountability beats strict blocking. People don’t turn off something with a personality nearly as fast, especially when their friends are part of the story.

What’s next for Once Upon a Focus

We’re not done. Next up is making it richer and more personal: hand-drawn art for every character (the extension already supports dropping it in), study streaks, a storybook “chapter” history of your sessions, and weekly recaps that show how your focus is improving. We also want the pet to learn your habits, so it goes easier on you when you’re on a roll and gets stricter on the sites that always get you.

On the social side, we want class rooms where a TA can host a session and push quizzes, more Tavern games, and better matchmaking between students studying similar subjects. After that, we want to tighten up security and privacy and ship it publicly on the Chrome Web Store.

The goal hasn’t changed since day one: make focusing feel less like punishment and more like a story you actually want to finish, with a little help from your friends and one very dramatic fairytale sidekick.