Accessibility (Reduced Motion)
Relevant source files
The following files were used as context for generating this wiki page:
The Accessibility module in @pcstyle/motion provides a specialized set of hooks and utilities designed to respect user system preferences regarding motion. The primary objective is to detect the prefers-reduced-motion media query and provide alternative, non-intrusive animation variants—typically limited to simple opacity fades—to ensure the interface remains usable and comfortable for users with motion sensitivities.
This system integrates directly with the project's broader animation architecture, including Variants and Hooks, by allowing developers to conditionally swap complex motion-heavy animations (like glitches or slides) for accessible alternatives.
Sources: src/hooks/useReducedMotion.ts:1-44, src/index.ts:1-20
Core Detection Logic
The system utilizes a custom React hook to monitor the browser's environment for reduced motion preferences. This serves as the foundation for all accessible motion decisions within the library.
useReducedMotion Hook
The useReducedMotion hook serves as a reactive wrapper around the window.matchMedia API. It initializes a stateful boolean and attaches an event listener to the (prefers-reduced-motion: reduce) query to handle real-time changes in system settings.
The diagram above illustrates the lifecycle of the motion detection hook, from initial mounting to reactive updates based on system events.
Sources: src/hooks/useReducedMotion.ts:9-27
Accessible Implementation
The library provides a high-level utility, useAccessibleMotion, which simplifies the process of branching animation logic based on the user's accessibility settings.
useAccessibleMotion Hook
This hook acts as a selector for Framer Motion Variants. It accepts a standard set of variants and an optional set of "reduced" variants. If the user prefers reduced motion, the hook returns the reduced set or a default fade animation.
| Parameter | Type | Description |
|---|---|---|
variants | Variants | The standard animations intended for users without motion restrictions. |
reducedVariants | Variants (Optional) | Custom overrides for users preferring reduced motion. |
Sources: src/hooks/useReducedMotion.ts:37-44
Default Fallbacks
When no specific reducedVariants are provided, the system defaults to a "safe" variant that only manipulates opacity. This ensures that elements still transition in and out of view without triggering physical movement or rapid flashing.
| State | Property | Value |
|---|---|---|
hidden | opacity | 0 |
visible | opacity | 1 |
Sources: src/hooks/useReducedMotion.ts:31-34, src/variants/fade.ts:7-10
Integration with Feature Modules
The accessibility system is designed to intercept motion-heavy variants defined across the library. For instance, cyberpunk-style animations like glitch or matrixRain involve rapid coordinate shifts and flickers that are high-risk for certain users.
This sequence shows how the library prioritizes user comfort by selecting safer animation paths during the component render cycle.
Sources: src/hooks/useReducedMotion.ts:37-48, src/variants/cyber.ts:7-14
Summary
The Accessibility (Reduced Motion) system in @pcstyle/motion ensures that high-intensity animations—such as those found in src/variants/cyber.ts and src/keyframes/index.ts—do not compromise the user experience for individuals with vestibular disorders or motion sensitivities. By providing the useAccessibleMotion hook, the project allows for a seamless transition between "flashy" cyberpunk aesthetics and essential, accessible functionality.
Sources: src/hooks/useReducedMotion.ts:1-44, src/hooks/index.ts:1-4