Reduced motion

import { useEffect, useState } from 'react';
import {
  AnimatePresence,
  MotionConfig,
  motion,
  useReducedMotion
} from 'motion/react';

type Quote = { text: string; author: string };

export function TestimonialCarousel({ quotes }: { quotes: Quote[] }) {
  const reduceMotion = useReducedMotion();
  const [index, setIndex] = useState(0);
  const quote = quotes[index]!;
  const next = () => setIndex((i) => (i + 1) % quotes.length);

  // Nothing should move on its own when Reduce motion is on.
  useEffect(() => {
    if (reduceMotion) return;
    const timer = setInterval(
      () => setIndex((i) => (i + 1) % quotes.length),
      5000
    );
    return () => clearInterval(timer);
  }, [reduceMotion, quotes.length]);

  return (
    // reducedMotion='user' drops the x slide when the setting is on and keeps
    // the opacity fade, so the slide becomes a 200ms crossfade.
    <MotionConfig
      reducedMotion='user'
      transition={{ duration: reduceMotion ? 0.2 : 0.4 }}
    >
      <section className='w-96 overflow-hidden rounded-2xl border bg-background p-6'>
        <AnimatePresence mode='wait' initial={false}>
          <motion.figure
            key={index}
            initial={{ opacity: 0, x: 40 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -40 }}
          >
            <blockquote className='text-lg'>“{quote.text}”</blockquote>
            <figcaption className='mt-3 text-sm text-muted-foreground'>
              {quote.author}
            </figcaption>
          </motion.figure>
        </AnimatePresence>
        {/* Small, helpful feedback like this hover color stays on. */}
        <button
          type='button'
          onClick={next}
          className='mt-4 rounded-full border px-3 py-1 text-sm transition-colors hover:bg-muted'
        >
          Next quote
        </button>
      </section>
    </MotionConfig>
  );
}