Cursor Glow

A pointer light with an optional comet trail.

Deploys roll back on their own when error rates climb, so the pager stays in the drawer.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/cursor-glow.json

import { CursorGlow } from "@/components/ui/cursor-glow"

<section className="relative">
  <CursorGlow trail />
  …
</section>

A small light with a long tail, and a wide, dim one without.

target="window" covers the viewport and follows the pointer everywhere.

A light layer. With the default target it fills its parent, which needs position: relative. Also accepts div attributes.

Prop	Type	Default
`target`	`"parent" \| "window"` Follow the pointer over the parent element, or over the whole window (a fixed layer).	`"parent"`
`size`	`number` Diameter of the light in pixels.	`360`
`intensity`	`number` Brightness of the light and tail, 0 to 1.	`1`
`trail`	`boolean` A comet tail that streams behind fast movement.	`false`
`trailLength`	`number` How long the tail lingers, in milliseconds.	`260`
`reveal`	`ReactNode` Content shown only under the light, fading toward its edge. It fills the layer, so a pattern lines up with the same pattern on the parent.	None
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

Decorative: aria-hidden and pointer-events none, so nothing under it changes.
Touch input is ignored. A finger has no hover, and a light left where it lifted looks broken.
It blends with screen. Place it before your content to light only the background, or after it to light the content too.
Positions are written straight to transforms from one animation frame loop, which stops as soon as the light settles; React never re-renders while the pointer moves.
The tail is a canvas sized with ResizeObserver at up to 2x pixel density; it reads the neon color each time the light appears, so accent changes reach it.
With reduced motion the light follows the pointer without easing and the tail is off.