减弱动效

组件如何跟随系统的减弱动效设置，以及如何按需强制播放或静止。

#默认行为

当用户在系统中开启「减弱动态效果」（prefers-reduced-motion: reduce）时，组件会自动降级，无需额外配置：

入场类动画直接呈现最终状态，不再位移或淡入。
WebGL 背景只绘制一帧静止画面，不再持续渲染。
循环的 CSS 动画停止播放。

#usePrefersReducedMotion

在自己的组件里读取同一份偏好，让整站行为保持一致。它也会读取外层 ReducedMotionProvider 的设置。

HeroVideo.tsx

import { usePrefersReducedMotion } from '@elyri/motion';

export function HeroVideo() {
  const reduced = usePrefersReducedMotion();
  return reduced ? <img src="/hero.jpg" alt="" /> : <video src="/hero.mp4" autoPlay muted loop />;
}

#ReducedMotionProvider

不改系统设置，强制某棵子树静止（reduced）或播放（reduced={false}），优先级高于系统偏好。适合缩略图墙、站内「关闭动画」开关等场景。

Thumbnail.tsx

import { Aurora, ReducedMotionProvider } from '@elyri/motion';

export function Thumbnail({ playing }: { playing: boolean }) {
  // 未悬停时强制静止，悬停后播放
  return (
    <ReducedMotionProvider reduced={!playing}>
      <Aurora />
    </ReducedMotionProvider>
  );
}

强制 reduced={false} 会无视用户的系统设置，请只在用户主动选择时使用。

#性能

WebGL 背景离开视口或页面切到后台时暂停渲染，回来后继续。
渲染分辨率默认不超过 2 倍设备像素比，高分屏上也不会过度消耗 GPU。
服务端渲染时偏好按「不减弱」输出，水合后切换为真实值，不会产生水合不一致。