An interactive React background that follows the cursor with a soft radial glow, adding depth and movement to otherwise static sections. Perfect for hero sections, landing pages, portfolios, and other modern interfaces.
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. |
See how Glow is used across React Vibe blocks, templates, and components. Explore real examples to get ideas for your own projects.