Inspiration

Staying focused online is increasingly difficult. While working on a task, it only takes a few seconds to drift from a research tab to YouTube, social media, or other unrelated sites. Often this shift happens without users even noticing. Attention drift is invisible, but its impact on productivity is real.

This project explores a simple idea: what if attention drift behaved like gravity? Certain websites repeatedly pull our attention away from our intended tasks. By visualizing these forces, users can recognize distraction earlier and regain control. Attention Gravity turns focus into a navigable mission through a universe of digital attention.

What it does

Attention Gravity is a browser extension that helps users detect, escape, and shield against digital distractions. Users start by creating a "mission" that defines their focus goal and duration.

During the mission, the system monitors browsing behavior and visualizes attention drift as gravitational forces. Distracting sites appear as planets or attention black holes that pull the user off course. When the system detects a strong pull, a "Gravity Alert" warns the user that they are entering a high gravity zone.

Users can immediately return to their task or activate "Gravity Shield" to temporarily block known distraction sites. After each session, a "Mission Report" reveals patterns such as attention pulls, time lost to distractions, and the sites that most frequently derail focus.

How we built it

Attention Gravity is designed as a browser extension that monitors browsing activity and detects patterns of attention drift. The interface visualizes focus as a space navigation experience. Missions represent focused work sessions, while distracting sites are visualized as gravitational objects. The system tracks tab switching and navigation patterns to identify when users drift away from their intended task. When a high gravity site is detected, the interface surfaces alerts and provides quick actions such as returning to the mission or activating Gravity Shield. The design focuses on awareness and user control rather than strict blocking.

Challenges we ran into

One of the main challenges was translating an abstract behavior like attention drift into an intuitive visual metaphor. We explored several interaction models before settling on the gravity and space navigation concept, which allowed distraction to feel like a physical force acting on the user’s trajectory. Another challenge was balancing guidance and autonomy. Many productivity tools rely on strict blocking, but our goal was to design a system that helps users recognize distraction without removing their control.

Accomplishments that we're proud of

We successfully designed a metaphor driven interface that makes invisible attention patterns visible and understandable. The mission based workflow creates a clear mental model for focused work sessions. Gravity alerts, return actions, and shielding mechanisms provide simple interventions that help users recover focus quickly. We also built a cohesive visual system that connects alerts, missions, reports, and shielding into one unified attention navigation experience.

What we learned

This project showed how powerful visual metaphors can be in helping users understand their own behavior. By turning focus management into a navigable mission, the system encourages awareness rather than relying purely on restriction. We also learned that giving users control over when and how to intervene can create a more supportive productivity experience.

What's next for Attention Gravity

Future work could include smarter detection of attention drift using machine learning, personalized distraction profiles, and deeper analytics on attention patterns. We are also interested in expanding the concept beyond browsers to help users manage attention across devices and digital environments.

Built With

  • chrome-extension-apis
  • claude-code
  • figma
  • figma-make
  • grok
  • javascript
  • ui
Share this project:

Updates