Installation

pnpm dlx uselab@latest add use-reduced-motion

Usage

import { useReducedMotion } from "@/hooks/use-reduced-motion"
 
export function MotionAwareCard() {
  const prefersReducedMotion = useReducedMotion()
 
  return (
    <div
      className={
        prefersReducedMotion ? "" : "transition-transform hover:-translate-y-1"
      }
    >
      Content
    </div>
  )
}

API Reference

useReducedMotion()

Return value

Notes

• This hook is useful for hover motion, autoplay effects, carousels, particle systems, and long-running interface transitions.
• Treat it as an accessibility input, not a visual preference toggle.
• Pair it with simpler affordances instead of removing feedback entirely.