a11y-media-motion

Implements a React hook that respects prefers-reduced-motion for CSS and JS animations.

Updated Jul 27, 2026

Search Tags:#accessibility #a11y #react #animation #prefers-reduced-motion #framer motion #css transitions

One-click install

npx skills add https://github.com/arayaroma/ether --skill a11y-media-motion-arayaroma

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: a11y-media-motion
Source: https://github.com/arayaroma/ether/tree/main/skills/a11y-media-motion
Command: npx skills add https://github.com/arayaroma/ether --skill a11y-media-motion-arayaroma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animations that ignore the OS-level "reduce motion" setting are an accessibility failure for users with vestibular disorders or motion sensitivity. This Skill provides a React hook pattern that reads and subscribes to the prefers-reduced-motion media query so animations adapt automatically. ## Core Features & Use Cases - Reduced-motion hook: A useReducedMotion hook that reads the media query on mount and subscribes to live changes while the app is open. - Conditional animation gating: Shows how to disable or downgrade transitions (e.g., transform to opacity-only fades) based on the user's setting. - Framer Motion guidance: Directs you to Framer Motion's built-in useReducedMotion to avoid duplicate media-query listeners in Framer Motion codebases. - Use Case: When adding a card hover animation or page transition in a React app, gate the transition behind the hook so users with reduced motion enabled never see large transform or parallax movement. ## Quick Start Add a reduced-motion check to my React component so its transition is disabled when the user has prefers-reduced-motion enabled.

Frequently Asked Questions about a11y-media-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I respect prefers-reduced-motion in React?▼

Create a useReducedMotion hook that reads window.matchMedia('(prefers-reduced-motion: reduce)') on mount and subscribes to its change event. Use the returned boolean to disable or downgrade transitions in your components.

How to handle reduced motion with Framer Motion?▼

Framer Motion ships its own useReducedMotion hook from the framer-motion package. Prefer it over a hand-rolled hook in a Framer Motion codebase to avoid running two separate media-query listeners.

Does respecting reduced motion mean removing all animation?▼

No. Shrinking animations to opacity-only fades or drastically cutting duration is often sufficient. Full removal is only required for large transform, parallax, or autoplay motion that triggers vestibular issues.

Why does my animation still play for users with reduced motion enabled?▼

Common causes are assuming the media query is false on mount instead of reading it, and not subscribing to change events. Read matchMedia on mount and add a change listener so the setting is respected even if flipped while the app is open.