Focus Mode Line Highlighter

WHAT IT DOES

This script helps you focus on one line of text at a time by dimming the background content while keeping a horizontal band (the focus line) at full brightness. When you move your mouse, the focus line follows, highlighting the line directly beneath your cursor. You can also use the scroll position to control the focus line, or lock it in place. The focus line height, dimming level, and follow behavior are all adjustable in the settings panel. Keyboard shortcuts let you move the focus line up and down, lock/unlock it, and toggle the focus mode on and off. This is especially useful for people with visual tracking difficulties, ADHD, or anyone who wants to reduce visual distraction while reading.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with text—articles, documents, emails, forums, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable focus mode" toggle enables or disables the script.

- Adjust the "Focus line height" slider to control how many lines are highlighted.

- Adjust the "Dim level" slider to control how much the background is darkened.

- Toggle "Follow mouse cursor" to enable or disable mouse tracking.

- Click "Toggle focus mode" to turn the focus line on or off.

- Click "Lock/Unlock position" to fix the focus line in place.

Keyboard shortcuts: ↑/↓ to move the focus line, L to lock/unlock, and F to toggle focus mode.

TECHNICAL SECTION — REAL MECHANISM

The focus line is created using a CSS mask on a semi-transparent overlay. The overlay is a fixed-position div that covers the entire viewport with a black background at the specified dim level. The mask uses a linear-gradient to create a cutout—a transparent horizontal band that allows the page content to show through at full brightness while the rest of the page is darkened. The cutout position is updated in real-time using the mask-image property with a dynamically generated gradient. The mask gradient is updated on mouse movement, scroll events, and keyboard input. The focus line height is controlled by the mask gradient's transparent band size. The dim level is controlled by the overlay's background opacity. The focus line can be locked by disabling position updates from mouse and scroll events. All settings are persisted via GM_setValue and loaded on page load. A MutationObserver watches for DOM changes and re-applies the focus line when new content is loaded.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The focus line is a visual aid and does not modify the page content. The dimming effect uses a CSS mask, which is supported on modern browsers. The script may not work perfectly on pages with complex layouts or overlapping elements. The keyboard shortcuts use single keys (F, L) that may conflict with site shortcuts or input fields—shortcuts are ignored when typing in input fields. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.