动态效果

选择共享光照是跟随指针还是保持固定方向。

选择动态效果

使用 system 可遵循减少动态效果设置。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。dynamic 会覆盖减少动态效果设置，应由用户主动选择。详情请参阅动态效果。

选择动态效果

试用以下模式。所选设置会更新全站的共享光照，包括示例卡片。

motion

跟随指针

比较动态效果

const light = useLight({ motion: "dynamic" });
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

启用 JavaScript 后即可操作示例。

比较动态效果

const light = useLight({ motion: "dynamic" });
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

指针光照

toward 强调朝向指针的边缘，away 则强调相反方向。range 表示光照在表面外部逐渐消失的距离。例如，range: 40 会在指针移到卡片外侧、距离卡片达到 40 CSS 像素时使效果消失，而不是仅照亮指针周围 40 像素的圆形区域。请将指针移到卡片外部，比较不同数值的效果。这些设置不影响固定光照。

direction

range: 480 px

跟随指针

指针光照

const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });

启用 JavaScript 后即可操作示例。

指针光照

const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });

动态效果值

动态效果值
值	行为
`system`	遵循减少动态效果和输入偏好。库的默认值。
`dynamic`	即使开启减少动态效果，也跟随鼠标、笔输入或触摸接触。
`static`	保持固定方向，忽略指针移动。

更多选项请参阅API 参考。

System

没有精确悬停设备时，光照以固定模式开始。关闭减少动态效果后，鼠标或笔输入可启用跟踪。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。

Dynamic

此模式会覆盖减少动态效果设置，应由用户主动选择。在鼠标、笔输入或触摸接触前，效果保持隐藏。

Static

为 staticDirection 指定有限角度（单位为度）或 "random"。示例提供 0°、90°、180°、270° 和 315°。random 在挂载时选择一个共享方向，重渲染和外观变化不会改变该方向。重新挂载可选择新方向。

staticDirection

Static

const light = useLight({ motion: 'static', staticDirection: "random" });

启用 JavaScript 后即可操作示例。

Static

const light = useLight({ motion: 'static', staticDirection: "random" });

尊重用户偏好

焦点、选择状态和验证结果不应依赖光照才能识别。输入方式和强制颜色模式的行为见无障碍。