Grounded

A Chrome extension that gates distracting sites behind a calm, free-form brain dump instead of a productivity test.

You open YouTube, Reddit, Instagram, X, TikTok, Snapchat, or Facebook. Instead of the feed, you get a quiet screen that asks: "What's making your mind busy right now?" Type it out. Every character fades away 1.5 seconds after you type it — no editing, no re-reading, no judging. Once you've typed 50 characters, the veil melts and the site loads normally.

There's no WPM counter, no accuracy score, no quote bank. It's not a typing test. It's a moment to notice why you opened the app in the first place.

How it works

1. Breathing intro — a 6-second breathing ritual plays before the canvas appears. Any keypress skips it immediately (and if the skip key is printable, it types itself instead of being thrown away).
2. The canvas — a free-form text area. Every character you type dissolves (fade + blur + drift) exactly 1.5s after it lands, like writing on water.
3. Unlock at 50 characters — once you've typed 50 raw characters, the overlay melts away and the underlying page becomes interactive.
4. Escape resets — pressing Escape at any point resets the session back to the breathing intro.

Isolation

The overlay renders inside a closed Shadow DOM (#grounded-host), styled via a constructable stylesheet (CSP-immune, so it survives even on sites with strict Content-Security-Policy like x.com). Roboto Mono is bundled inside the extension itself (Latin, Latin Extended, and Cyrillic subsets), so fonts never depend on the network or the host page's CSP.

While the overlay is active, keyboard (keydown/keypress/keyup) and mouse (click, dblclick, mousedown, mouseup, contextmenu, wheel, touchmove) events are trapped in the capture phase on window, so host-site shortcuts (YouTube's space/k/f, etc.) and background scrolling stay inert until you unlock.

Turning it on/off

Click the toolbar icon to open the popup and flip the switch. Turning it off melts away any overlay that's currently showing, immediately, without needing to reload the tab. Turning it back on takes effect on the next page load. The extension is on by default — installing it doesn't silently do nothing.

Installing (unpacked / dev)

1. Clone this repo.
2. Go to chrome://extensions.
3. Enable Developer mode (top right).
4. Click Load unpacked and select the repository folder.
5. Visit any of the gated sites to see it in action.

Project structure

manifest.json     — MV3 manifest: permissions, content script matches, popup wiring
content.js        — overlay state machine, Shadow DOM boot, event trapping
content.css       — host isolation reset + overlay styles (loaded into the shadow root)
styles.js         — inlines content.css as a string for the constructable stylesheet
popup.html/.js    — toolbar popup with the on/off toggle
fonts/            — bundled Roboto Mono subsets (woff2)
icons/            — toolbar icons

No build step, no dependencies, no framework — vanilla JS throughout.

Sites covered

YouTube, Reddit, Instagram, X (Twitter), TikTok, Snapchat, Facebook.