reducedMotion with "user" option

[GKosheev]

I'm using Chakra UI library, which uses motion for animation, and I have performance issues with one of the built-in components. To disable/reduce animation on each of the components, I use reducedMotion.

I've read the docs for reducedMotion prop and found out that there is an option user which

Respect user's device settings

Is there any additional information on how exactly it evaluates the performance of each device and decides whether or not to reduce motion?

[gianlucajahn]

There is! But it's not about the device's performance, actually.

On Windows, Mac and on iOS, there are settings for users to configure if they would prefer reducing motion in both their OS and on all web pages that listen for this setting. This user setting can be listened to and is actually being listened to in many pages to increase accessibility. So, whenever a user visits your page, there's a query listening for the visitor's 'prefers-reduced-motion' value and if it is 'reduce', your animation will be reduced/disabled.

You can read more about this setting on a11y-101.com, specifically this article. Hope that helps!