useReducedMotion

bash

npm install @hua-labs/hua

tsx

import { useReducedMotion } from "@hua-labs/ui";

const prefersReducedMotion = useReducedMotion();

// Conditionally apply animations
const animationClass = prefersReducedMotion
  ? "transition-opacity"
  : "transition-all duration-500 ease-out";

// Or skip animations entirely
if (prefersReducedMotion) {
  setVisible(true); // instant
} else {
  animateIn(); // with animation
}

macOS

System Preferences → Accessibility → Display → Reduce motion

Windows

Settings → Ease of Access → Display → Show animations in Windows

DevTools

Chrome: Rendering → Emulate CSS media feature prefers-reduced-motion


boolean

useWindowSize useMotionState