Why it matters
People with vestibular disorders set reduce motion to avoid nausea and dizziness; infinite or large animations must stop for them (WCAG 2.3.3).
How to fix it
Wrap non-essential motion in @media (prefers-reduced-motion: no-preference) or disable it under reduce; in JS check matchMedia('(prefers-reduced-motion: reduce)') / useReducedMotion().
Example
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}References
More smoothness rules
void smooth reports 13 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.
layout-shift-after-inputLayout shifts long after an interactionlayout-shift-on-scrollLayout shifts while scrollinganimate-layout-propertyAnimation of a layout-triggering propertytransition-alltransition: allwill-change-overusewill-change is applied too broadlyraf-loop-idlerequestAnimationFrame loop runs while idlescroll-timeline-no-fallbackContent is invisible without scroll-driven-animation supportmultiple-webgl-contextsMultiple WebGL contexts