useReducedMotion

"use client";

import * as React from "react";

/**
 * @dfl-header: v1, generated by labs.designfrom.com at build time
 * Item: use-reduced-motion (useReducedMotion)
 * What: A hook that reports whether the user prefers reduced motion and
 *    updates when the setting changes.
 * Status: ready. License: MIT. Author: Design From Labs
 *    <https://labs.designfrom.com>
 * Source: https://github.com/Design-from-labs/labs @ 803b92c1a30e (examples/use-reduced-motion)
 * Credits: S-003 React (MIT); S-004 shadcn/ui and its registry schema (MIT)
 * Install: npx shadcn@latest add https://labs.designfrom.com/r/use-reduced-motion.json
 *   npx shadcn@latest add @designfrom/use-reduced-motion
 *   npm i @designfrom/react, then import { useReducedMotion } from "@designfrom/react/use-reduced-motion";
 * Docs: https://labs.designfrom.com/ui/use-reduced-motion (index: https://labs.designfrom.com/llms.txt)
 */

const QUERY = "(prefers-reduced-motion: reduce)";

function subscribe(onChange: () => void) {
  const media = window.matchMedia(QUERY);
  media.addEventListener("change", onChange);
  return () => media.removeEventListener("change", onChange);
}

/**
 * true when the user prefers reduced motion. Server rendering assumes false;
 * the browser value takes over on hydration and follows later changes.
 */
export function useReducedMotion(): boolean {
  return React.useSyncExternalStore(
    subscribe,
    () => window.matchMedia(QUERY).matches,
    () => false,
  );
}