prefersReducedMotion: () =>
  matchMedia("(prefers-reduced-motion: reduce)").matches,
prefersMotion: () =>
  matchMedia("(prefers-reduced-motion: no-preference)").matches,
···
功能分析
prefersReducedMotion:

检测用户是否启用了减少动画或运动的偏好设置。
如果启用了,matchMedia("(prefers-reduced-motion: reduce)").matches 会返回 true。
表示用户希望减少不必要的动画或视觉运动。
prefersMotion:

检测用户是否没有特别的减少运动偏好(默认允许动画)。
如果没有特别偏好,matchMedia("(prefers-reduced-motion: no-preference)").matches 会返回 true。
表示用户对动画或视觉运动没有限制,可以正常显示动画。

使用 prefers-reduced-motion 的重要性(尤其是在 GSAP 或自定义动画中)
1. 提升用户体验
用户多样性: 有些用户(尤其是有视觉敏感或晕动症倾向的人)会对复杂动画感到不适。
如果忽视这些用户偏好,可能导致糟糕的用户体验,甚至用户放弃使用你的网站。
尊重用户设置: 使用 prefers-reduced-motion 确保动画适配用户需求。