Reravel

Install from Chrome Web Store

A Chrome extension that makes social media boring on purpose.

Reravel applies visual and behavioral friction to sites you choose: grayscale, reduced contrast, dimmed opacity, blurred media, a vignette overlay, and typography flattening. When you navigate to a monitored site, you hit a pause screen with a random quote before you can scroll. Then the effects fade in over the next few seconds. The goal isn't to block anything. It's to make the experience just unpleasant enough that you stop and ask yourself if this is what you actually want to be doing.

What it does

• Degrades the visual experience with layered CSS filters (grayscale, contrast, opacity, blur, vignette) that make sites feel flat and lifeless
• Interrupts auto-pilot browsing with a timed pause showing a rotating quote from Seneca, Marcus Aurelius, Cal Newport, and others, plus your own message. An "I'm ready" button skips the wait if you've had enough of it
• Fades the effects in over a configurable ramp after the pause, so the page sours as you sit with it rather than arriving pre-ruined
• Blurs or hides media separately from the rest of the page, since images and video are usually the pull
• Flattens typography by optionally overriding fonts to monospace or serif, removing bold text, and tightening line spacing
• Bizarro mode for when grayscale isn't enough: inverted colors, hue-rotated, over-saturated
• Snooze for 1 or 5 minutes when you actually need to use a site, plus an optional custom duration you set yourself
• Watch this site straight from the popup when you land somewhere that isn't on the list yet
• Keyboard shortcut (Alt+Shift+G) to toggle without opening the popup

Every effect has its own slider. The site list is fully configurable, and ships with 18 defaults.

Install

1. Clone this repo
2. Go to chrome://extensions and enable Developer Mode
3. Click "Load unpacked" and select the repo directory

No build step. No dependencies.

How it works

Reravel injects a <style> tag into monitored sites at document_start, before the page renders. All visual effects are pure CSS, which means they work under strict Content Security Policies (Discord, etc.) and apply instantly with no flash of unstyled content.

The pause is a full-screen overlay that hides the page for a configurable number of seconds (default 12). It shows a random quote and your custom message, and its countdown stops while the tab is in the background so switching away doesn't burn it down. It fires once per page load, so refreshing triggers it again.

When the countdown ends (or you hit "I'm ready"), the page is revealed and the effects ease in over the fade-in duration, default 25 seconds. Set it to 0 for the old instant behavior. Media that loads mid-ramp eases in from its own appearance rather than popping to full blur, and once the ramp is done, later infinite-scroll media snaps straight to the final state.

SPA navigation is handled for YouTube (yt-navigate-finish event, so each new video pauses and ramps fresh) and Discord (#app-mount polling).

Stack

• Chrome Extension Manifest V3
• Vanilla JS, CSS
• chrome.storage.sync for settings, chrome.storage.local for ephemeral state
• chrome.scripting.registerContentScripts for dynamic site targeting
• chrome.alarms for snooze timers
• optional_host_permissions for user-added sites, so Reravel only asks for access to a site when you add it, and gives that access back when you remove it

Why

Social media sites are designed by very smart people to be as visually engaging as possible. Color, typography, layout, and motion are all tuned to keep you scrolling. Reravel turns those dials in the other direction. It doesn't block you from going to Reddit. It just makes Reddit feel like a government website from 2004.

The interstitial adds a second layer of friction: a forced pause that gives your prefrontal cortex a chance to catch up with the habit loop your basal ganglia already started.

License

MIT