website/lib/useReducedMotion.ts

"use client";

import { useEffect, useState } from "react";

/**
 * Tracks `prefers-reduced-motion`. Returns true when the visitor wants
 * reduced motion — components use this to render the final static state.
 */
export function usePrefersReducedMotion(): boolean {
  const [reduced, setReduced] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(mq.matches);
    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);

  return reduced;
}