useReducedMotion
HookDetects if the user has enabled reduced motion in their OS settings.
npx arupui add use-reduced-motion
Usage
use-reduced-motion.tsx
import { useReducedMotion } from "@/hooks/use-reduced-motion"
function AnimatedCard() {
const prefersReduced = useReducedMotion()
return (
<motion.div
animate={{ y: prefersReduced ? 0 : [0, -10, 0] }}
transition={{ duration: prefersReduced ? 0 : 0.5 }}
>
Content
</motion.div>
)
}Returns
boolean