bloomkit

useReducedMotion

Detects whether reduced motion is preferred, via the OS-level prefers-reduced-motion media query or the .bloom-reduced-motion class on the <html> element. Returns a boolean.

Use this hook to conditionally disable or simplify animations for users who have indicated they prefer less motion.

Usage

import { useReducedMotion } from "@bloomkit/react";
 
export function AnimatedCard() {
  const reduced = useReducedMotion();
 
  return (
    <div
      className={reduced ? "transition-none" : "transition-all duration-500 hover:-translate-y-1"}
    >
      Card content
    </div>
  );
}

Return value

Returns a single boolean. It is true when reduced motion is active, false otherwise.

How it works

The hook checks two signals and re-evaluates whenever either changes:

Media query — listens to (prefers-reduced-motion: reduce) via matchMedia. Changes when the user toggles the OS accessibility setting.

HTML class — observes the class attribute on <html> via a MutationObserver. Reacts immediately when .bloom-reduced-motion is added or removed at runtime.

If either signal is active, the hook returns true.

App-level override

You can force reduced motion for all users by adding .bloom-reduced-motion to the <html> element, regardless of OS settings:

<html class="bloom-reduced-motion">

Or toggle it programmatically:

// Enable
document.documentElement.classList.add("bloom-reduced-motion");
 
// Disable
document.documentElement.classList.remove("bloom-reduced-motion");

This is useful for testing, user preferences stored in your own backend, or staging environments where you want to review layouts without distraction.