Glowing Effect

An interactive glow effect that follows mouse movement with customizable colors, intensity, and animation styles.

Preview

Hover over me

Move your cursor around the card

Component not found in registry.

Usage

tsx
20 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { GlowingEffect } from "@/components/ui/glowing-effect"

export default function GlowCard() {
  return (
    <div className="relative rounded-xl border bg-neutral-950 p-6">
      <GlowingEffect
        variant="purple"
        spread={40}
        glow={true}
        disabled={false}
        proximity={64}
        intensity={1.5}
        animationStyle="bouncy"
      />
      <div className="relative z-10">
        {/* Your content */}
      </div>
    </div>
  )
}

Color Variants

purple

purple

blue

blue

green

green

orange

orange

pink

pink

rainbow

rainbow

Animation Styles

smooth

smooth

snappy

snappy

bouncy

bouncy

Intensity Levels

High Intensity (2x)

High Intensity + Blur

Props

PropTypeDefaultDescription
variant'default' | 'white' | 'purple' | 'blue' | 'green' | 'orange' | 'pink' | 'rainbow' | 'custom'defaultColor theme preset for the glow effect
customColors{ primary, secondary, tertiary, quaternary: string }undefinedCustom colors (used when variant is 'custom')
animationStyle'smooth' | 'snappy' | 'bouncy'smoothStyle of the glow movement animation
intensitynumber1Intensity multiplier for the glow effect (0.5 to 2)
blurnumber0Blur amount in pixels for the glow
spreadnumber20Size of the glow spread in degrees
proximitynumber0Distance outside element that activates glow
inactiveZonenumber0.7Center percentage that doesn't activate glow (0-1)
glowbooleanfalseShow static glow border when not hovering
disabledbooleantrueDisable the interactive glow effect
movementDurationnumber2Base duration of glow movement in seconds
borderWidthnumber1Width of the glow border in pixels