usePrefersReducedMotion

1"use client";
2 
3import { useEffect, useLayoutEffect, useState } from "react";
4 
5const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
6 
7// useLayoutEffect is a no-op (with a console warning) during SSR — fall back
8// to useEffect there since there's no window/matchMedia to read anyway.
9const useIsomorphicLayoutEffect =
10  typeof window === "undefined" ? useEffect : useLayoutEffect;
11 
12/**
13 * Tracks the OS-level Reduced Motion setting, live. Unlike a one-time
14 * `matchMedia(...).matches` check, this updates if the user toggles the
15 * setting while the page is open (no reload needed).
16 *
17 * Defaults to `true`, not `false`. A consumer that mounts a GSAP
18 * ScrollTrigger off this value reads it during its *first* render's effects
19 * no matter which effect phase either hook uses — React doesn't re-render
20 * mid-flush just because this hook's own effect called setState. Defaulting
21 * to `false` meant every mount briefly created a real, pinned ScrollTrigger
22 * before correcting a render later; anyone scrolling in that window saw the
23 * full animation despite reduced motion being on. Defaulting to `true`
24 * flips which side gets the one-frame guess: a non-reduced-motion user
25 * waits one imperceptible frame for the animation to start, instead of a
26 * reduced-motion user getting a live trigger they were never supposed to.
27 */
28export function usePrefersReducedMotion(): boolean {
29  const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
30 
31  useIsomorphicLayoutEffect(() => {
32    const media = window.matchMedia(REDUCED_MOTION_QUERY);
33    const update = () => {
34      setPrefersReducedMotion(media.matches);
35    };
36    update();
37    media.addEventListener("change", update);
38    return () => {
39      media.removeEventListener("change", update);
40    };
41  }, []);
42 
43  return prefersReducedMotion;
44}