Separate feedback from spectacle
Use the prefers-reduced-motion media feature to detect a user preference in CSS, and expose the same preference to scripted effects when needed. For example, remove a repeated background zoom while keeping a brief color or text cue that signals a successful action. Avoid making reduced motion an invisible downgrade: players should still understand what changed and what to do next.
Do not remove every animation mechanically. A moving target may be gameplay, while camera shake after a collision may be decorative. Preserve motion needed for location or timing, and provide another clear signal where possible. MDN explains that the preference requests reducing or replacing nonessential motion.
Test transitions and repeated effects
Review motion across the whole experience: menus, loading, camera transitions, win and loss states, and recurring effects during a long run. A setting that only disables one CSS animation can miss JavaScript or canvas motion. Keep the preference consistent across rendering layers and avoid sudden changes if the system setting changes while a game is active.
Enable the operating-system reduce-motion setting and check that players can still locate targets, recognize hits and understand transitions. Test CSS, scripted and canvas effects together. MDN documents the media feature and how to provide an alternate style when the preference is reduce.
Questions about reduced motion in browser games
Should reduced motion stop all movement in a game?
No. Some movement is essential to play or communicate state. Reduce or replace nonessential effects and preserve a clear way to understand timing, location and feedback.
How does a page detect the preference?
CSS can use the prefers-reduced-motion media feature. Scripted or canvas effects need an equivalent preference path so the visual presentation stays consistent.