Motion
Choose whether a shared light follows the pointer or keeps a fixed direction.
Choose motion behavior
Use system to respect reduced motion. Touch updates the light position in viewport coordinates. Scrolling and lifting the finger preserve the last position; surfaces respond as they move beneath it. A new touch updates the position. Offer dynamic only as an explicit choice because it overrides reduced motion. See Motion for details.
Choose motion behavior
Try each mode below. The selection updates the shared light across this site, including the example card.
Follow your pointer
const light = useLight({ motion: "dynamic" });const surface = useSurface(light, { edgeStyle: "raised" });
<Card ref={surface}> Your component</Card>Pointer lighting
toward lights the edge facing the pointer; away lights the opposite edge. range is the fade distance outside each surface. For example, range: 40 fades to zero when the pointer is 40 CSS pixels outside the card; it does not create a 40-pixel bright circle around the pointer. Move the pointer outside the card to compare values. Fixed lighting ignores these settings.
Follow your pointer
const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });Motion values
| Value | Behavior |
|---|---|
system | Respects reduced motion and input preferences. Library default. |
dynamic | Follows mouse, pen or touch contact, including with reduced motion enabled. |
static | Keeps a fixed direction; ignores pointer movement. |
For additional settings, see the API reference.
System
Without a precise hover device, lighting starts fixed. Mouse or pen input can enable tracking when reduced motion is off. Touch updates the light position in viewport coordinates. Scrolling and lifting the finger preserve the last position; surfaces respond as they move beneath it. A new touch updates the position.
Dynamic
Offer this mode as an explicit choice because it overrides reduced motion. The effect stays hidden until mouse, pen or touch contact arrives.
Static
Set staticDirection to any finite angle in degrees or "random". The demo offers 0°, 90°, 180°, 270° and 315°. Random chooses one shared direction per mount; rerenders and appearance changes preserve it. Remount to choose a new direction.
Static
const light = useLight({ motion: 'static', staticDirection: "random" });Respect user preferences
Keep focus, selection and validation visible independently of lighting. See Accessibility for input and forced-colors behavior.