MenuClose

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.

View source
PreviewReact
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.

PropertyTypeNotes / default
childrenReactNodeYour own content; the default is a demonstration
disabledbooleanfalse; motion also respects system preferences
className / stylestring / CSSPropertiesApplied to the outer container
View source on GitHubFree for commercial projects · MIT