A dynamic React cursor follow effect that creates a glowing spotlight interaction based on mouse movement. This component combines a spotlight effect in React with gradient background animation and smooth mouse tracking to deliver an interactive background experience. Ideal for modern UI design, it brings a glowing light effect and mouse move gradient effect using CSS and React for immersive user interactions.
npm i framer-motion| Property | Default Value | Description |
|---|---|---|
| backgroundColor | "#0d0d0d" | Background color of the container where the glow effect is applied. |
| glowColor | "#7d6e45" | Primary color of the glow that follows the cursor. |
| glowSize | "280px" | Size (radius) of the glow effect. |
| glowOpacity | 0.3 | Opacity of the glow effect (0 to 1). |
| glowFadeAt | "100%" | Controls how quickly the glow fades toward the edges. |
| borderGlow | false | Enables or disables glow effect on the border. |
| borderGlowColor | "rgba(130,100,255,0.4)" | Color of the border glow effect. |
| borderGlowSize | "200px" | Size of the border glow spread. |
| borderGlowTransparency | "80%" | Controls transparency level of the border glow. |