Focus Bubble

• 

  Break

• 

  Nudge shown

• 

  Main page

• 

  Running

• 

  Settings

• 

  Metrics and history

• 

  Today's Focus Sessions History

• 

  Today's Nudges

Inspiration

Students everywhere struggle with digital distraction, tab hopping, endless scrolling, and autoplay videos. Traditional blockers feel harsh and get bypassed. We wanted a gentle, AI-assisted focus companion that nudges students back on track without restricting autonomy. FocusBubble was inspired by behavioral science, ADHD-friendly design, and the need for supportive, non-judgmental digital study tools.

What it does

FocusBubble is a Chrome extension that detects distraction patterns in real time, rapid tab switching, infinite scroll, autoplay chains, and provides adaptive, context-aware micro-interventions. Instead of blocking sites, it offers soft focus sessions, personalized nudges, and intentional break timers. Students stay focused while preserving their freedom and reducing stress.

How we built it

We built a Chrome Extension using Manifest V3, content scripts for event detection, a background service worker for state management, and a floating overlay for nudges. The AI layer is powered by OpenAI for generating context-aware suggestions, shaped through a deterministic rules engine for reliability. All data stays local via chrome.storage.local, and our optional Next.js backend handles lightweight AI requests.

Challenges we ran into

• Designing nudges that were helpful but not annoying
• Ensuring privacy by never reading or storing page content
• Keeping CPU usage low while monitoring behavior patterns
• Balancing deterministic logic with AI-driven personalization
• Avoiding “overblocking” behaviors that frustrate users

Accomplishments that we're proud of

• Built a distraction detection engine that runs almost entirely on-device
• Created AI-driven micro-interventions that feel supportive, not punitive
• Achieved a smooth, lightweight UX that students can use daily
• Designed an ADHD-friendly interface that is encouraging and non-judgmental
• Made a fully functional MVP that is demo-ready within hackathon timelines

What we learned

We learned how subtle interaction design, tone, timing, and friction, has a huge impact on user behavior. We also discovered how valuable it is to pair classic heuristics (tab-switch thresholds, scroll loops) with LLM reasoning to generate empathetic, context-aware nudges. And above all, we learned that the best focus tools are the ones that respect user autonomy.

What's next for FocusBubble

• Personalized “focus profiles” tuned to each student
• Cross-device syncing with privacy-safe account linking
• AI study planning based on LMS assignments
• Community focus rooms for peer accountability
• Mobile companion app for offline nudges
• Research partnership to measure academic impact in real classrooms

Built With

• javascript
• service-worker