Respect reduced motion preferences

/* Default: animations enabled */
.card {
  transition: transform 0.3s ease;
}
 
.card:hover {
  transform: scale(1.05);
}
 
/* Reduced motion: disable or simplify */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
 
  .card:hover {
    transform: none;
    /* Use opacity instead of motion */
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

function prefersReducedMotion(): boolean {
  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
}
 
// React hook
function useReducedMotion(): boolean {
  const [prefersReduced, setPrefersReduced] = useState(false)
 
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
    setPrefersReduced(mediaQuery.matches)
 
    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches)
    mediaQuery.addEventListener('change', handler)
    return () => mediaQuery.removeEventListener('change', handler)
  }, [])
 
  return prefersReduced
}
 
// Usage
function AnimatedComponent() {
  const reducedMotion = useReducedMotion()
 
  return (
    <motion.div
      animate={{ x: reducedMotion ? 0 : 100 }}
      transition={{ duration: reducedMotion ? 0 : 0.5 }}
    >
      Content
    </motion.div>
  )
}

import { motion, useReducedMotion } from 'framer-motion'
 
function Card() {
  const shouldReduceMotion = useReducedMotion()
 
  return (
    <motion.div
      whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
      transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.3 }}
    >
      Card content
    </motion.div>
  )
}