Prefers-reduced-motion Packages

The shared core and build system behind Magica11y

Detects user’s preferences for reduced motion using the 'prefers-reduce-motion' CSS3 level 5 media query.

A suite of utility functions to detect 'user-preference' and 'environment' media features.

Detect system (or manually set) preferences for color scheme and reduced motion.

Detects user’s color scheme preferences using the 'prefers-color-scheme' CSS3 level 5 media query.

Detect & listen to preferences for prefers-color-scheme, prefers-reduced-motion, and prefers-contrast.

A simple, lighweight package that makes sure your animations do not run when the user motion preference is disabled.

A micro ES6 module (~0.5KB) for detecting prefers-reduced-motion and watching for changes.

Emulate CSS user preferences in Storybook

Emulate CSS user preferences in Storybook

Storybook addon that adds ability to emulate render mode (css user preferences) of a story

Detects the characteristics of the user’s display using 'environment-blending' CSS3 level 5 media query.

Detects the user’s preferences for inverted colors using the 'inverted-colors' CSS3 level 5 media query.

Detects the ambient light-level of the user’s device using the 'light-level' CSS3 level 5 media query.

Shared core behind Magica11y’s functions.

Detects user’s preferences for contrast using the 'prefers-contrast' CSS3 level 5 media query.

Detects user’s transparency preferences using the 'prefers-reduced-transparency' CSS3 level 5 media query.

React hook for subscribing to user's motion preference.