Motion and reduced motion

Some people get dizzy or nauseous from movement on screen, and turn on Reduce motion in their operating system. Browsers expose that choice as the prefers-reduced-motion media query. Every animated component listens to it.

What components do

• Looping effects stop. Marquees, particles, shimmer and orbiting effects rest in a still frame.
• Entrances simplify. Slides, scales and blurs become a quick fade or appear at once.
• Interaction still responds. Hover and press states change colour or opacity instead of moving.
• Nothing is lost. Content that animates in is fully readable in the still state.

In CSS

Wrap movement in a media query, or use Tailwind's motion-safe and motion-reduce variants:

Copy<div className="motion-safe:animate-marquee motion-reduce:animate-none" />

Copy@media (prefers-reduced-motion: reduce) {
  .orbit {
    animation: none;
  }
}

With Motion

Set reducedMotion="user" once near the root. Motion then skips transform and layout animations for people who asked for less motion, and keeps opacity and colour changes:

Copy"use client"
 
import { MotionConfig } from "motion/react"
 
export function Providers({ children }: { children: React.ReactNode }) {
  return <MotionConfig reducedMotion="user">{children}</MotionConfig>
}

For effects you drive yourself, read the preference with the hook:

Copyimport { useReducedMotion } from "motion/react"
 
const reduce = useReducedMotion()
const variants = reduce
  ? { hidden: { opacity: 0 }, show: { opacity: 1 } }
  : { hidden: { opacity: 0, y: 16 }, show: { opacity: 1, y: 0 } }

Canvas and requestAnimationFrame

For canvas effects, check the media query before starting the loop, draw one static frame when it matches, and listen for changes:

Copyconst query = window.matchMedia("(prefers-reduced-motion: reduce)")
if (query.matches) drawStillFrame()
else start()
query.addEventListener("change", () => (query.matches ? stop() : start()))

Also pause the loop when the element is off screen with an IntersectionObserver; it saves battery for everyone.

Test it

• macOS: System Settings → Accessibility → Display → Reduce motion.
• Windows: Settings → Accessibility → Visual effects → Animation effects.
• Chrome DevTools: Rendering panel → Emulate CSS media feature prefers-reduced-motion.
• Playwright: page.emulateMedia({ reducedMotion: "reduce" }).