You are browsing as a guest. Sign up (or log in) to start making projects!

Grounding

  • 6 Devlogs
  • 6 Total hours

Grounding is a browser extension that breaks your doom-scrolling habit. While other blockers just use a password or a timer, Grounding makes you manually type out a chill quote about nature or stepping away to unlock the site. The goal of this project is to encourage you to get off your phone, and to go outside and have some fun!

Ship #1 Pending review

Q. What did you make?

A. Chrome extension that gates distracting sites (YouTube, Reddit, IG, X, TikTok, Snapchat, Facebook) behind a calm brain-dump instead of a productivity test. It asks “what’s making your mind busy right now?”, every character you type dissolves 1.5s later, and 50 characters unlocks the site. Its just a forced pause to notice why you opened the app.

Q. What was challenging?

A. Getting real isolation from host-site CSS/CSP (solved with a closed Shadow DOM + constructable stylesheet + bundled fonts) and fully trapping input — YouTube’s shortcuts were still firing under the overlay until I trapped keydown/keypress/keyup plus the full mouse event set with stopImmediatePropagation.

Q. What are you proud of?

A. Killing three earlier “typing test” versions of this to land on the much simpler, much better idea: stop measuring, just let people empty out.

3 major QoL improvements:

  1. Full Shadow DOM isolation — overlay can’t be broken by host-site styles/CSP on any gated site.
  2. Full keyboard + mouse input trap — host shortcuts (space/k/f on YouTube, etc.) can’t fire underneath the overlay.
  3. Toolbar popup on/off toggle (chrome.storage-backed) — turn it off instantly, no digging through chrome://extensions.

How to test:
Load unpacked via chrome://extensions → Developer mode → Load unpacked.
Visit any gated site, let the breathing intro play (or press a key to skip), type into the canvas, hit 50 chars to unlock, try Escape to reset. Toggle off in the popup mid-session and confirm it melts away immediately.

Time invested: about 6 hours in total.

Try project → See source code →
Open comments for this post

1h 34m 42s logged

devlog v0.6.0

~1 hour and 28minutes logged

i finally admitted to myself that the thing i was building was basically monkeytype with extra steps and a guilt trip attached. wpm counters, accuracy tracking, quote banks… all of it made the extension feel like a typing test. and the last thing i need when im opening youtube for the 40th time today is to feel like im being graded. the “productivity” version of this extension was stressing me out more than the doomscrolling was. so i deleted the whole concept and started over.

what sucked

  • the css pollution bug. outube and twitter kept leaking their styles into the overlay and centering was broken on like half the sites. it filled up the website console and it sucked to fix.
  • found out the scroll lock used a :has(.fade-out) selector, which breaks if the site itself has any element with the class fade-out.
  • the google fonts import just straight up does not load on x.com because of csp.
  • the drift-up animation on the dissolving letters didnt work at all. css transforms dont apply to inline elements so the text was just fading in place this whole time and i thought it was drifting.
  • there was also a random prime number sieve running on every single page load. no clue

The Epiphany

the epiphany was: stop measuring. the typing test framing WAS the problem. the extension is supposed to make you go outside.

so now its just a blank void that asks “what’s making your mind busy right now?” and everything i type dissolves 1.5 seconds later. Just 50 characters

so thats it i think

what actually got built

  • free-form canvas. zero quotes, zero wpm, zero accuracy, zero scores
  • dissolving text engine — every char fades + blurs + drifts away exactly 1.5s after typing, and each char gets its own random drift vector so the text scatters like ash instead of disappearing as a block.
  • invisible-ish 50 char threshold, then the whole overlay melts (fade + scale + unblur) and lets me back in
  • full shadow dom isolation — closed root + a constructable stylesheet, which apparently is immune to page csp?? so host sites cant touch the overlay anymore. not youtube, not twitter
  • roboto mono bundled INSIDE the extension (latin, latin-ext, cyrillic — yes cyrillic, i type in more than one language) so csp and offline cant hurt me anymore
  • kept the breathing intro but its 6s now and any key skips it. and the skip key actually types itself instead of being eaten
  • capture-phase key handling so youtube shortcuts dont fire behind the overlay while i type (no more accidental video pausing mid-vent)
  • an actual working scroll lock this time
  • reduced-motion support because accessibility is not optional
  • removed the prime sieve. again. dont want to talk about it
    done with this project

maybe one day ill keep working on it. release a 1.0.0…

0
0
35
Open comments for this post

59m 31s logged

Another hour of coding today, and it led to a massive realization.

The 0.5.0 Wall (And Why It Sucked)

I spent today’s session trying to fine tune the “Zen Governor” speed penalty and fixing the text wrapping bugs. While the words are wrapping better now, actually using the extension felt terrible. I type pretty fast, and using my own extension was making me so mad that I wanted to stop working on it.

the screenshot I attached shows what the penalty was. basically, if you started writing too fast, it would add MORE to the poem. and it sucked. i tried playing around with the characters per minute timings but its just not very reliable and hard to perfect.

If a mindfulness app makes you want to punch your keyboard, you’ve built the wrong app.

the Epiphany

The whole typing-test framework is inherently stressful. If the app is tracking your typos, grading your accuracy, and monitoring your speed, your brain stays stuck in “performance mode.” You arent relaxing, youre just playing this game of “type as fast as you can”. while its fun to type fast, its not the point of this project.

So, I’m throwing the whole typing exam mechanic in the trash.

The Next Step: The “Brain Dump” Overhaul (v0.6.0)

For the next version, we are pivoting to something that actually feels therapeutic:

  • Free-form Canvas: No more copying quotes perfectly. No more “incorrect” keys or rigid typing checks. You get an empty screen that asks: What’s making your mind busy right now?
  • Dissolving Text: You type whatever raw thoughts are in your head. Exactly 1.5 seconds after you type a letter, it will smoothly fade, blur, and drift away into nothingness. Your stressful thoughts literally disappear from the screen.
  • No Performance Metrics: Goodbye WPM, goodbye accuracy tracking. Just a simple counter showing you’ve let go of 50 characters. Once you type 50 characters of a raw brain dump, the overlay fades out, and the site unlocks.
  • hopefully this 5.0 release will be the LAST, as this project is getting a little boring to work on…

This completely gets rid of the annoying spacing and indexing bugs too, because the browser can just handle normal text input natively. Time to rebuild this into something that actually brings some peace.

0
0
5
Open comments for this post

2h 0m 1s logged

Well. I just spent 2 hours on the newest version. And for what…

This is the official 0.4.0 release.

It’s been a bit since my last devlog, and a lot has happened behind the scenes to finally bridge the gap between project and final extension. unfortunately, this is not the final.

First, a quick reality check on the layout. In my last post, I said the text was perfectly centered. It was… on my blank HTML test page. But the second I actually started testing the extension on live websites like YouTube and Twitter, their styles completely leaked into my code and broke it. So ye, the centering is currently broken but ill fix it one day. maybe

Here is a quick list of everything I actually changed and built since the last log:

It actually unlocks the page now: Once you finish typing the very last letter, the overlay just fades away. pretty simple for now, i might make it like a melting effect? not sure yet

  • Bolder text & a clean new font: Like I said in the last post, the old text was way too small and thin. I cranked it up to 34px, made it a lot bolder, and switched it to Google’s ‘Roboto Mono’ font so it looks way niccer.
  • Multi-line poems: You can type through short stanzas now instead of just flat, one-line quotes. I completely broke the extension at first because the cursor kept getting stuck on the invisible line-break characters \n, but I fixed the logic so it jumps lines.
  • Escape to restart: Added a quick reset feature. Hitting the Escape key wipes your current progress and pulls up a fresh random quote.

The Plan

The code works well and everything feels incredibly smooth, but this 0.4.0 update is officially a halfway point and a place to rebuild.

After staring at the live WPM and accuracy counters ticking up while I was testing it, I asked my dad how it looked. He made me realize that I am literaly building the exact opposite of what I actually want.

The whole points of this Grounding project is to be a relaxing speed bump that encourages you to take a breath and get off your device. But by adding speed metrics and accuracy, I literally just cloned Monkeytype.
instead of calming your brain, i filled it with the dopamine hit like any game. you just want to get back to your social media even FASTER.

but what is next: For the next update, im making a big change. I am stripping away the stress metrics (byeWPM and accuracy) and shifting toward a more mindful experience. I am going to look into organic, calming color palettes and maybe even a mechanic that forces you to ‘slow down’ rather than type fast. Like, maybe if you type too fast, it generates more text for you to slow you down. Not really sure yet, but the speed type era is officially over.

i also learnedd more markdown so from now on my dev logs will look better.

0
0
7
Open comments for this post

34m 31s logged

huge update for grounding today.

first off, i fixed the layout issues from the last post. the text is finally centered on the screen and actually readable against the dark background.

but the biggest change is that the typing mechanic is officially here.
I shifted the text rendering to individual character spans so i could track keyboard inputs character by character. it completely mirrors the monkeytype feel now.

How it looks so far:

  • characters start out a muted gray
  • typing a correct key turns it a smooth offwhite
  • typos turn a soft red
  • i also got the custom caret (cursor) working.

it has a decent transition so it slides smoothly between letters instead of just snapping rigidly, and it flashes slowly when you stop typing (the animation is still going to be worked on cuz its not the best). backspace support is fully functional too, so you can actually go backward and correct your mistakes.

now, what’s next:

  • making the overlay fade out beautifully once the quote is 100% complete
  • also might make the text larger and bolder; its hard to read
  • actually unlocking the restricted website after you finish typing
  • expanding the quote pool with some longer, cleaner poems/quotes (i might try to get the quotes from some bank, not sure yet.)
0
0
8
Open comments for this post

25m 52s logged

Added some placeholder quotes. I have it randomly choose from a list of quotes that then displays on the overlay. Next update will make the text EASIER to see, and also i will add the ability to type and get into the social media. also its off center and ill fix that.

0
0
5
Open comments for this post

16m 38s logged

Finally started the extension. Googles docs for creating extensions is amazing, theres a full guide. i matched the coloring from MonkeyType, because thats where my inspiration comes from.

First devlog. Created the files, and created some small text to see how all of the work would turn out. Looks great so far.

Features to add:

  1. Poems to auto show.
  2. Compatible with more websites.
  3. add the actual typing animations and everything
    4, clean up the code cuz its messy
0
0
7

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…