The reduced-motion contract
Someone has told their operating system that motion makes them ill. A blank canvas is not the correct way to respect that.
prefers-reduced-motion is a setting a person deliberately turned on, usually because vestibular disorder makes large-area motion genuinely unpleasant or disabling. Full-screen parallax, scroll-driven camera moves and continuous ambient motion are precisely the cases it exists for, and immersive work is where honouring it matters most and is skipped most.
The contract is not no motion at all: it is no large, unexpected, continuous or parallax motion. An opacity fade is generally fine. A camera flying through a scene as you scroll is not. The correct implementation renders one deliberately chosen frame and schedules nothing further, so the composition survives and the motion does not.
Treat the preference as live. It can change while your page is open, so listen for changes on the media query rather than reading it at startup, and make sure your loop can be entered and exited rather than only decided once. While you are in that code, add the neighbouring courtesy: stop rendering when the canvas is off screen or the tab is hidden.
You should now be able to
- Define a still state that is still a designed composition
- Respond to the preference changing rather than reading it once
Loading…