FocusFlow

Making the web accessible for every mind — one profile at a time.

Comment

Inspiration

The web was built for the average user — but there's no such thing. 1 in 5 people have a learning disability, and millions more live with ADHD, sensory sensitivities, visual impairments, or motor challenges. Every day, these users encounter walls of text, flashing ads, tiny click targets, and harsh contrast that make browsing exhausting or impossible. We wanted to fix that — not for one website, but for the entire web at once.

What it does

Cognitive Load Optimizer is a Chrome extension that rebuilds any webpage in real-time to match a user's cognitive profile. Users can pick from 6 profiles — ADHD, Dyslexia, Visual, Sensory, Focus, and Motor — and combine them however they need. The extension also includes extra tools like a reading ruler, on-demand AI summarization, and image hiding.

Key features:

  • ADHD mode — uses Groq's Llama 3.1 to generate a 3–5 bullet summary of the entire page, placed at the top before you read a single word
  • Dyslexia mode — injects the OpenDyslexic font and adjusts letter spacing, word spacing, and line height across every element
  • Sensory mode — stops all CSS animations, pauses autoplaying videos, mutes audio, and desaturates the page to 40%
  • Reading ruler — a highlight band that follows your mouse, helping you track which line you're reading
  • Instant apply — changes apply the moment you hit Save, no page reload needed

How we built it

The extension is built on Chrome's Manifest V3 architecture with a content script, background service worker, and popup UI. The content script traverses the DOM in real time, detecting long text blocks, injecting CSS overrides, and managing focus state. A Web Worker runs off the main thread to track scroll speed without blocking rendering — this powers the paragraph focus highlight that dims everything except the line you're currently reading.

For AI summarization we use the Groq API with Llama 3.1 8B Instant — chosen for its 131K token context window (enough to summarize full Wikipedia articles) and free tier. The background service worker acts as an API proxy, keeping the user's key secure and off the content script.

Typography is handled by injecting an @font-face override pointing to a locally bundled OpenDyslexic font file, which forces the font across every element on any site without needing server-side changes.

Challenges we faced

Reversibility — Making every profile fully toggleable without a page reload was harder than applying them. We solved this by using CSS class injection instead of inline styles, tracking which elements were modified, and explicitly removing those classes on toggle-off rather than relying on stylesheet removal alone.

Site diversity — No two websites use the same HTML structure. Our CSS selectors had to be broad enough to work on Wikipedia, Reddit, YouTube, and news sites simultaneously, without breaking layouts. We learned to target semantic elements and ARIA attributes rather than site-specific class names.

AI reliability — Groq occasionally rate-limits requests when summarizing multiple pages in quick succession. We implemented an automatic retry loop with exponential backoff to handle this gracefully.

What we learned

Building something that touches every website forces you to think defensively. You can't assume anything about the DOM, the CSS, or the JavaScript running on the page. We learned to write CSS that degrades gracefully, DOM code that never throws, and UI that communicates clearly when something goes wrong.

We also learned that accessibility isn't one thing — it's a spectrum of needs that often overlap. Someone with ADHD might also benefit from the reading ruler. Someone with dyslexia might also want high contrast. Letting users combine profiles was one of the best decisions we made.

Built With

Share this project:

Updates