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

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 and documented in 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. 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, this is a mandatory architectural rule. The 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 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 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 demonstrates the required implementation for high-intensity animations:

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 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:

@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:

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 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
• Policy documentation: The mandate is recorded in 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 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. 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 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 at line 74, and additional reference links to MDN documentation appear at line 1100 of SKILL.md.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}