CngxReducedMotion

Reflects the user's prefers-reduced-motion media query as a reactive signal.

Adds the cngx-reduced-motion CSS class to the host when the user prefers reduced motion. The prefersReducedMotion() signal updates live when the OS preference changes - use it in TypeScript to skip animations, disable auto-playing media, or choose between animated and instant transitions.

Unlike a CSS-only @media (prefers-reduced-motion: reduce) approach, this directive makes the preference available in component logic (e.g., to pick a different animation strategy or suppress requestAnimationFrame loops).

Conditional animation#

<div cngxReducedMotion #rm="cngxReducedMotion"
     [style.animation]="rm.prefersReducedMotion() ? 'none' : 'spin 2s linear infinite'">
</div>

TypeScript logic#

readonly rm = viewChild(CngxReducedMotion);
readonly duration = computed(() => this.rm()?.prefersReducedMotion() ? 0 : 300);

https://cngxjs.github.io/cngx/examples/#/common/a11y/reduced-motion/animation-toggle https://cngxjs.github.io/cngx/examples/#/common/a11y/reduced-motion/toast-notifications-motion-aware