CursorSpotlight
Cursor-following glow that injects into any parent. Fill mode, border mode, or both. Smooth tracking with CSS variables. Zero-config—just drop it inside any card or container.
About this Component
Drop this component inside any card, button, or container. It automatically finds the styled parent, injects the glow layers, and starts tracking the cursor. No wrapper needed, no layout changes.
Three modes: fill (radial gradient glow), border (highlighted edge that follows cursor), or both. The border uses mask-composite to create a hollow reveal effect—the glow appears only on the border itself, not the fill.
Smooth mouse tracking uses CSS custom properties updated via requestAnimationFrame, so there's no React re-render on every mouse move. Configurable smoothing controls the interpolation speed for snappy or floaty feel.
Cleans up properly on unmount: removes injected layers, restores original overflow/position styles, clears CSS variables. Works with any border-radius inherited from parent.
