Motion
Choose whether lighting follows your pointer or stays in a fixed direction. Configure motion once for every surface sharing the light.
Choose motion behavior
Try System, Dynamic and Static below. Your selection updates the shared light across this site, including this card. Each surface keeps its colors and layout.
Follow your pointer
Choose how this card responds to movement.
const light = useLight({ motion: "dynamic", staticDirection: "random" });const surface = useSurface(light, { edgeStyle: "raised" });
<Card ref={surface}> Your component</Card>Motion values
| Value | Behavior |
|---|---|
system | Respects reduced motion and input preferences. Default. |
dynamic | Follows mouse or pen input, including with reduced motion enabled. |
static | Keeps a fixed direction; ignores pointer movement. |
For additional settings, see the API reference.
System
The default respects reduced motion. Without a precise hover device, lighting starts fixed; mouse or pen input can enable tracking when reduced motion is off. Touch movement never drives the light.
Dynamic
Continuously follows mouse or pen input, even when reduced motion is enabled. Offer it as an explicit user choice. Before pointer input, the dynamic effect is hidden.
Static
Keeps a fixed direction. The selector offers 0°, 90°, 180°, 270° and 315°, plus Random per mount. In your code, use any finite angle in degrees, or "random" to choose one shared direction per mount. Rerenders and appearance updates keep that direction; remount the light to sample a new one.
Respect user preferences
Keep focus, selection and validation visible independently of lighting. See Accessibility for input and forced-colors behavior.