[Showcase & Feat-Req] Disable or make subtle the parallax effect if "Reduce motion" accessibility is turned on

[ADTC]

The parallax should only run in full motion if @media (prefers-reduced-motion: no-preference) is applicable. It should be disabled or have a reduced motion when the users prefers reduced motion; that is if @media (prefers-reduced-motion: reduce) is applicable.

macOS has an Accessibility toggle:

Windows, Linux and other OSes have similar toggles which the browsers respect.

Showcase:

Currently I am able to achieve this using Javascript source code similar to this:

import SimpleParallax from 'simple-parallax-js/vanilla'

var images = document.querySelectorAll('img:not(.no-parallax)') // or as appropriate

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

new SimpleParallax(images, { scale: reduceMotion ? 1 : 1.5, /* other options */ })

Hint: Setting the scale to a slightly higher value than 1 will still keep the parallax effect but make it more subtle when reduced motion is enabled.

But a caveat: If the user toggles the "Reduce motion" toggle in the OS settings, a page reload is necessary to re-apply the above code. It maybe possible to achieve it using listeners, but I didn't explore it as the chances of a user toggling the option while viewing the page are minimal.

Feature Request:

I believe this should be baked into the library and applied by default without any developer configuration of the library.

Also, it should dynamically re-apply if the switch is toggled in OS settings. (Browsers automatically reapply CSS when it happens.)

An option could be added to control it more finely, such as having different options for when reduced motion is enabled.