CursorSpotlight

Drop this component inside any card, button, or container.

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.