Out Of Focus

• 

  Out of Focus — a browser-tab survival game. The deadliest threat lives in your tab bar.

• 

  Full loop in five steps — forage, dread, Perfect Return, and Medusa’s “LOOK AWAY.”

• 

  The twist: leave the tab to forage HP & Focus Shards — looking away is a required tactic.

• 

  Focus debt kills!

• 

  Look away to gain shards and kill enemies

• 

  Clean arena combat: WASD to move, weapons auto-fire while the swarm closes in.

• 

  choose what you'd like to upgrade when xp reaches max

• 

  Shadow Foraging, Focus Debt, true safe-zone title tips — everything serves the tab choice.

• 

  Sirens shatter when you look away. Overstay and the Tab Stalker hunts you.

Inspiration

Browser games have one famous weakness: people tab away. I flipped that into the whole fantasy. What if the deadliest enemy wasn’t on the canvas, but in the tab bar—favicon, title text, and the act of looking away? Out of Focus came from wanting a jam game that couldn’t exist on console: Page Visibility as a combat mechanic.

What it does

Out of Focus is a top-down wave survival game (Vampire Survivors–style) with a fourth-wall twist:

• Fight escalating hordes, collect XP, pick upgrades
• Ctrl+Tab / click away to forage HP and Focus Shards (only while hidden)
• A Dread meter rises while you’re gone—favicon morphs into an eye, title whispers
• Return in the teal window for a Perfect Return shockwave; overstay and a Tab Stalker spawns on you
• Medusa Gaze forces you to literally not look when it resolves
• Extra pressure: Sirens (die when you look away), Mirrors (echo your hide time), Focus Debt, boss-lite events

How I built it

I used a lightweight Vite + TypeScript + HTML5 Canvas setup—no heavy engine—so visibility, favicon data-URLs, and <title> theater stay first-class. Gameplay pauses on hide; penalties/rewards are computed from wall-clock timestamps on return (no expensive background sim). Tunables live in one balance config; entity pooling keeps late waves smooth. The landing page and full how-to-play guide ship with the build.

Challenges I ran into

• Teaching a weird mechanic fast without a wall of text (intro: forage → Medusa → Perfect Return)
• Browsers throttle timers while hidden—so dread/Medusa must use timestamps, not trust intervals
• Making Ctrl+Tab feel fair: forage is required, but overstaying must hurt
• Keeping arena combat simple enough that the tab fantasy stays the star

Accomplishments that I'm proud of

• A mechanic judges can see in a demo video (film the tab bar, not just the canvas)
• Favicon + title as real gameplay UI
• A full loop in the jam window: arena, dread, consequences, tutorial, meta, juice, landing
• Something that feels unique for a web jam—not “another arena clone with a gimmick sticker”

What I learned

• The Page Visibility API is enough for high-stakes design if you treat time as math, not background AI
• Clarity beats content: one forced intro taught more than five enemy types
• Browser chrome (favicon/title) is an underrated design surface

What's next for Out of Focus

• Deeper enemy “tab” behaviors and safer onboarding polish
• Stronger audio pass and hosted jam build polish
• Optional “true tip” safe-zone storytelling expansion
• Stretch: more Perfect Return synergies and a short curated demo route for judges

Built With

• canvas
• css
• gamedesign
• html5
• javascript
• localstorage
• page-visibility-api
• roguelite
• typescript
• vite
• web-audio-api