Motion Reduction Toggle

WHAT IT DOES

Motion Reduction Toggle is a browser extension that reduces motion on any webpage by applying CSS overrides to disable or reduce animations, transitions, and scrolling effects. It applies prefers-reduced-motion compliant styles, removes CSS animations and transitions, and disables smooth scrolling. Users can toggle the feature on or off and choose which types of motion to reduce: animations, transitions, scroll effects, and parallax effects. The tool is ideal for users with vestibular disorders, motion sensitivity, migraines, or anyone who prefers a calmer browsing experience with minimal movement.

WHERE IT RUNS

Motion Reduction Toggle runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, injecting CSS to override motion properties. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable motion reduction. Select which types of motion to reduce using the checkboxes: Animations (disables CSS animations), Transitions (disables CSS transitions), Scroll effects (disables smooth scrolling and scroll-triggered animations), and Parallax effects (disables parallax scrolling effects). Click the "Reapply" button to manually refresh the styles. The settings are saved per website, so your preferences persist across visits. When enabled, all animations and transitions on the page are effectively disabled, and scrolling becomes instant rather than smooth.

REAL MECHANISM — WHY THIS WORKS

Most motion reduction tools rely on browser preferences or require manual CSS overrides. Motion Reduction Toggle uses a comprehensive CSS injection approach that targets all motion properties. The tool injects a style element with high-specificity !important rules that override animation and transition properties. For animations, it sets animation-duration to 0.001s and animation-iteration-count to 1, effectively making animations instant and one-time only. For transitions, it sets transition-duration to 0.001s, making transitions instant. For scrolling, it sets scroll-behavior: auto to disable smooth scrolling. For parallax, it sets transform: none and background-attachment: scroll to disable parallax effects. The tool also includes a fallback for the prefers-reduced-motion media query to ensure compatibility with browsers that support the preference. Each motion type can be toggled independently, allowing users to fine-tune the level of motion reduction. This approach ensures comprehensive, reliable, and fully private motion reduction without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view controls. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and motion reduction types—are saved per domain for a seamless experience.

PLEASE NOTE

Motion Reduction Toggle requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool applies CSS !important rules, which may conflict with page styles that also use !important. The tool reduces motion by overriding animation and transition properties, which may affect interactive elements that rely on motion for feedback. The tool does not affect video, GIF, or canvas animations—only CSS-based motion. All settings are stored locally in your browser using GM_setValue. No page content, motion data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only modifies CSS at your request.