# How to Configure Reduced Motion Support Using the Motion Library and prefers-reduced-motion

> Learn to implement reduced motion support using the motion library and prefers reduced motion media query in your React projects. Ensure accessibility and enhance user experience.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: how-to-guide
- Published: 2026-06-01

---

**The Leonxlnx/taste-skill repository mandates that any animation with a MOTION_INTENSITY greater than 3 must respect user preferences by implementing the `useReducedMotion` hook from `motion/react` or the CSS `@media (prefers-reduced-motion: reduce)` media query.**

The taste-skill repository establishes strict animation standards for React applications, requiring that high-intensity motion effects gracefully degrade for users with vestibular disorders. To configure reduced motion support using the Motion library and prefers-reduced-motion, developers must implement conditional animation logic based on the `useReducedMotion` hook and CSS media queries. This approach ensures compliance with the accessibility rules defined in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) and documented in [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md).

## Understanding Motion Intensity Requirements

The repository uses a **MOTION_INTENSITY** scale to categorize animation complexity, as defined in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md). When designs specify an intensity greater than 3, the implementation must detect and respect the user's `prefers-reduced-motion` setting.

According to line 526 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md), this is a mandatory architectural rule. The [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) at line 74 records the policy change that made reduced motion support compulsory for intensity levels above 3. For intensities 1 through 3, the UI should contain only `:hover` and `:active` states, which naturally respect the browser's default `no-preference` value without additional implementation.

## Detecting Preferences with useReducedMotion

The Motion library (distributed as `motion/react`) exposes the `useReducedMotion` hook, which reads the browser's `prefers-reduced-motion` media query and returns a boolean.

As specified in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) at line 372, all animated components must import `{ motion, useReducedMotion }` from `motion/react`. When the hook returns `true`, indicating the user has requested reduced motion, components should render static variants instead of animated transitions. This programmatic detection satisfies the requirement for dynamic, React-based animations.

## Implementing CSS Fallback Strategies

For keyframe animations and CSS transitions, the repository mandates media query-based fallbacks. The specification at line 528 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) requires wrapping animated styles in conditional blocks.

Implement the following pattern:

- **Primary styles**: Place animations inside `@media (prefers-reduced-motion: no-preference)`
- **Reduced motion override**: Explicitly disable effects under `@media (prefers-reduced-motion: reduce)`

This approach ensures the browser automatically suppresses motion without executing JavaScript, providing immediate respect for user preferences at the rendering engine level.

## Code Implementation Examples

### Basic React Component with useReducedMotion

The following pattern from [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) demonstrates the required implementation for high-intensity animations:

```tsx
import { motion, useReducedMotion } from "motion/react";

export function Card() {
  const reduce = useReducedMotion();
  const variant = reduce
    ? { opacity: 1, y: 0 }
    : { opacity: 0, y: 20, transition: { type: "spring", stiffness: 120 } };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={variant}
      className="rounded-xl p-4 shadow-lg bg-white"
    >
      Card content
    </motion.div>
  );
}

```

This implementation satisfies the rule at line 527 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) by conditionally applying animation props based on the `reduce` boolean.

### CSS-Only Animation Support

For stylesheets, implement the media query pattern as documented at line 528:

```css
@media (prefers-reduced-motion: no-preference) {
  .pulse {
    animation: pulse 2s infinite ease-in-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

```

### Reusable Higher-Order Component

For applications with multiple animated elements, create a wrapper component that propagates the reduced motion flag:

```tsx
import { ReactNode } from "react";
import { useReducedMotion } from "motion/react";

export function WithReducedMotion({ children }: { children: ReactNode }) {
  const reduce = useReducedMotion();
  return <>{children}</>;
}

```

Child components can consume this flag to consistently apply reduced motion support across complex component trees, ensuring compliance with the taste-skill specification.

## Summary

- **Mandatory threshold**: Animations with MOTION_INTENSITY greater than 3 must implement reduced motion support according to [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) at line 526
- **Primary detection method**: Import and use the `useReducedMotion` hook from `motion/react` as required at line 372
- **CSS implementation**: Wrap animations in `@media (prefers-reduced-motion: no-preference)` and provide `reduce` overrides
- **Static tier behavior**: Intensities 1-3 use only `:hover` and `:active` states per line 561 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md)
- **Policy documentation**: The mandate is recorded in [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) at line 74 and references MDN documentation at line 1100

## Frequently Asked Questions

### What MOTION_INTENSITY level triggers reduced motion requirements?

According to [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) at line 526, any animation with a **MOTION_INTENSITY greater than 3** must implement reduced motion support. Intensities 1 through 3 may use static `:hover` and `:active` states, which respect the browser's default `no-preference` value without additional implementation, as noted at line 561.

### How does useReducedMotion detect accessibility preferences?

The `useReducedMotion` hook from `motion/react` monitors the `prefers-reduced-motion` media query using the `window.matchMedia` API. It returns `true` when the user has configured their operating system or browser to minimize motion, indicating vestibular disorders or motion sensitivity. This hook is explicitly required for intensity levels above 3 in the taste-skill repository.

### Can I rely solely on CSS media queries without the useReducedMotion hook?

Yes, for pure CSS animations, the `@media (prefers-reduced-motion: reduce)` query provides sufficient protection and satisfies the requirement at line 528 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md). However, for Motion library components, combining CSS media queries with the `useReducedMotion` hook ensures JavaScript-driven animations respect user preferences, fulfilling the mandatory architectural rules for high-intensity animations.

### Where is the reduced motion policy documented in the repository?

The primary specification resides in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) at lines 372, 526, and 528, which define the import requirements, intensity thresholds, and CSS implementation patterns. The policy implementation history appears in [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) at line 74, and additional reference links to MDN documentation appear at line 1100 of [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md).