Skip to main content

​
Overview

The Glowing Effect component creates a dynamic proximity-based glow that reacts to mouse movements and scroll events. It’s perfect for adding interactive visual feedback to cards, buttons, and other UI elements.

​
Usage

<GlowingEffect
  :blur="0"
  :proximity="100"
  :spread="20"
  variant="default"
  :glow="true"
  :disabled="false"
>
  <div class="p-8">
    Your interactive content here
  </div>
</GlowingEffect>

​
Props

​
blur
number
default:"0"
The blur radius applied to the glow layer.
​
inactiveZone
number
default:"0.7"
Defines the inner radius (as a fraction of the smallest dimension) within which the glow is inactive.
​
proximity
number
default:"0"
Additional proximity distance (in pixels) to trigger the glow when the cursor is near the element.
​
spread
number
default:"20"
Size of the spread of the glow effect around the element.
​
variant
'default' | 'white'
default:"default"
Variant of the glow style (e.g., a white-themed version).
​
glow
boolean
default:"false"
Controls the visibility of the static glow border.
​
class
string
default:""
Additional CSS classes for custom styling.
​
disabled
boolean
default:"true"
Disables the proximity detection and glow animations when true.
​
movementDuration
number
default:"2"
Duration (in seconds) of the smooth rotation animation.
​
borderWidth
number
default:"1"
Width (in pixels) of the border applied to the glow effect.

​
Credits

Ported from Aceternity UI Glowing Effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us