사용자의 동작 감소 옵션을 존중하는 애니메이션

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    -o-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

import { function useSyncExternalStore<Snapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot): Snapshot
@paramsubscribe@paramgetSnapshot@see{@link https://github.com/reactwg/react-18/discussions/86}useSyncExternalStore } from 'react';
 
const const QUERY: "(prefers-reduced-motion: reduce)"QUERY = '(prefers-reduced-motion: reduce)';
 
const const subscribePrefersReducedMotion: (onStoreChange: () => void) => () => voidsubscribePrefersReducedMotion = (onStoreChange: () => voidonStoreChange: () => void) => {
  const const mediaQuery: MediaQueryListmediaQuery = var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)window.function matchMedia(query: string): MediaQueryList
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/matchMedia)matchMedia(const QUERY: "(prefers-reduced-motion: reduce)"QUERY);
  const mediaQuery: MediaQueryListmediaQuery.MediaQueryList.addEventListener<"change">(type: "change", listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('change', onStoreChange: () => voidonStoreChange);
 
  return () => const mediaQuery: MediaQueryListmediaQuery.MediaQueryList.removeEventListener<"change">(type: "change", listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any, options?: boolean | EventListenerOptions): void (+1 overload)
Removes the event listener in target's event listener list with the same type, callback, and options.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)removeEventListener('change', onStoreChange: () => voidonStoreChange);
};
 
const const getPrefersReducedMotionSnapshot: () => booleangetPrefersReducedMotionSnapshot = () => {
  return var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)window.function matchMedia(query: string): MediaQueryList
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/matchMedia)matchMedia(const QUERY: "(prefers-reduced-motion: reduce)"QUERY).MediaQueryList.matches: boolean
[MDN Reference](https://developer.mozilla.org/docs/Web/API/MediaQueryList/matches)matches;
};
 
const const getServerSnapshot: () => undefinedgetServerSnapshot = () => {
  return var undefinedundefined;
};
 
export const const usePrefersReducedMotion: () => boolean | undefinedusePrefersReducedMotion = () => {
  return useSyncExternalStore<boolean | undefined>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => boolean | undefined, getServerSnapshot?: (() => boolean | undefined) | undefined): boolean | undefined
@paramsubscribe@paramgetSnapshot@see{@link https://github.com/reactwg/react-18/discussions/86}useSyncExternalStore(
    const subscribePrefersReducedMotion: (onStoreChange: () => void) => () => voidsubscribePrefersReducedMotion,
    const getPrefersReducedMotionSnapshot: () => booleangetPrefersReducedMotionSnapshot,
    const getServerSnapshot: () => undefinedgetServerSnapshot
  );
};

export function ThemeSwitcher() {
  const prefersReducedMotion = usePrefersReducedMotion();
 
  return (
    <motion(Sun)
      className="block size-1/2 dark:hidden"
      initial={{ rotate: 0 }}
      animate={{
        rotate: isSystemDark ? (prefersReducedMotion ? 0 : -90) : 0,
      }}
    />
  );
};

import { usePrefersReducedMotion } from '@/hooks/use-prefers-reduced-motion';
import { motion as Motion, type HTMLMotionProps } from 'framer-motion';
import { forwardRef } from 'react';
 
const ReducedMotionDiv = forwardRef<HTMLDivElement, HTMLMotionProps<'div'>>(
  ({ ...motionProps }, ref) => {
    const prefersReducedMotion = usePrefersReducedMotion();
 
    const handler: ProxyHandler<typeof motionProps> = {
      get: function (target, prop, receiver) {
        if (
          typeof prop === 'string' &&
          prefersReducedMotion &&
          shouldRemoveProp(prop)
        ) {
          return undefined;
        }
 
        return Reflect.get(target, prop, receiver);
      },
    };
 
    const shouldRemoveProp = (prop: string) => {
      const propsToRemove = [
        'animate',
        'initial',
        'transition',
        'variants',
        'whileDrag',
        'whileFocus',
        'whileHover',
        'whileInView',
        'whileTap',
        'onMouseMove',
        'onMouseLeave',
      ];
      return propsToRemove.includes(prop);
    };
 
    const proxiedProps = new Proxy(motionProps, handler);
 
    return <Motion.div {...proxiedProps} ref={ref} />;
  }
);
 
ReducedMotionDiv.displayName = 'ReducedMotionDiv';
 
export default ReducedMotionDiv;

import { Children, cloneElement, isValidElement, type ReactNode } from 'react';
import { isMotionComponent } from 'framer-motion';
import { usePrefersReducedMotion } from '@/hooks/use-prefers-reduced-motion';
 
type MotionSlotProps = {
  children: ReactNode | ReactNode[];
}
 
const shouldRemoveProp = (prop: string) => {
  const propsToRemove = [
    'animate',
    'initial',
    'transition',
    ...
  ];
  return propsToRemove.includes(prop);
};
 
export const MotionSlot = ({ children }: MotionSlotProps) => {
  const prefersReducedMotion = usePrefersReducedMotion();
 
  const processChild = (child: ReactNode): ReactNode => {
    if (isValidElement(child) && isMotionComponent(child.type)) {
      const props = Object.keys(child.props).reduce(
        (acc: Record<string, any>, key) => {
          if (shouldRemoveProp(key) && prefersReducedMotion) {
            acc[key] = undefined;
          } else {
            acc[key] = child.props[key];
          }
          return acc;
        },
        {}
      );
 
      return cloneElement(child, props);
    }
    return child;
  };
 
  const processedChildren = Children.map(children, processChild);
 
  return <>{processedChildren}</>;
};
 
MotionSlot.displayName = 'MotionSlot';

if (isValidElement(child) && Symbol('motionComponentSymbol')) {...}

<MotionSlot>
  <motion.span whileTap={}>Span!</motion.span>
</MotionSlot>
 
<MotionSlot>
  <motion.a href='' whileTap={}>Anchor!</motion.span>
</MotionSlot>