Documentation

usePrefersReducedMotion

Detect user's motion preference for accessibility.

Installation

pnpm add @rouf-dev/pantheon-ui

Usage

"use client";

import { usePrefersReducedMotion } from "@rouf-dev/pantheon-ui";

export function AnimatedComponent() {
  const prefersReducedMotion = usePrefersReducedMotion();

  return (
    <div
      className={prefersReducedMotion ? '' : 'animate-slide-in'}
    >
      {prefersReducedMotion 
        ? 'Animations disabled for accessibility'
        : 'Animated content'}
    </div>
  );
}

Return Value

boolean: True if user prefers reduced motion