Pointer Glow — React Interaction
A handheld light for layouts: the region dims slightly and a warm source follows the pointer, brightening whatever it rests on.

Starting live preview
Usage
import { PointerGlow } from "@/components/PointerGlow";
export function Spotlight() {
return (
<PointerGlow radius={300} color="#ffdfae"
{...{
radius: 300,
intensity: 0.5,
dim: 0.32,
color: "#ffdfae"
}}
>
<section>Any content — the light follows the pointer across all of it.</section>
</PointerGlow>
);
}Implementation notes & API
Accepts children (your layout), radius, intensity, dim, color, disabled, className and style. Keyboard focus carries the light to the focused control; reduced motion keeps the room fully lit. Works without WebGPU.
| Property | Type | Notes / default |
|---|---|---|
children | ReactNode | Your own content; the default is a demonstration |
disabled | boolean | false; motion also respects system preferences |
className / style | string / CSSProperties | Applied to the outer container |
View source on GitHubFree for commercial projects · MIT