Components
Glowing Effect
Interactive glowing effect with customizable colors, blur, and proximity detection.
Glowing Effect
The GlowingEffect component creates an interactive glowing effect that responds to mouse proximity. It features customizable colors, blur effects, and smooth animations that follow the cursor movement.
Usage
Default Glow
Multi-color gradient effect
White Glow
Clean monochrome effect
Wide Blur Glow
Larger spread area with blur
<template>
<div class="min-h-screen bg-slate-900 p-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
<div class="relative rounded-xl bg-slate-800/50 border border-slate-700/50 p-6 h-48">
<MGlowingEffect
:blur="0"
:border-width="3"
:spread="80"
:glow="true"
:disabled="false"
:proximity="64"
:inactive-zone="0.01"
class="rounded-xl"
/>
<div class="relative z-10 h-full flex flex-col justify-between">
<h3 class="text-lg font-bold text-white">
Default Glow
</h3>
<p class="text-slate-400 text-sm">
Multi-color gradient effect
</p>
</div>
</div>
<div class="relative rounded-xl bg-slate-800/50 border border-slate-700/50 p-6 h-48">
<MGlowingEffect
:blur="0"
:border-width="3"
:spread="80"
:glow="true"
:disabled="false"
:proximity="64"
:inactive-zone="0.01"
variant="white"
class="rounded-xl"
/>
<div class="relative z-10 h-full flex flex-col justify-between">
<h3 class="text-lg font-bold text-white">
White Glow
</h3>
<p class="text-slate-400 text-sm">
Clean monochrome effect
</p>
</div>
</div>
<div class="relative rounded-xl bg-slate-800/50 border border-slate-700/50 p-6 h-48">
<MGlowingEffect
:blur="8"
:border-width="3"
:spread="120"
:glow="true"
:disabled="false"
:proximity="64"
:inactive-zone="0.01"
class="rounded-xl"
/>
<div class="relative z-10 h-full flex flex-col justify-between">
<h3 class="text-lg font-bold text-white">
Wide Blur Glow
</h3>
<p class="text-slate-400 text-sm">
Larger spread area with blur
</p>
</div>
</div>
</div>
</div>
</template>
Props
blur
number
Amount of blur to apply to the glow effect in pixels.
inactiveZone
number
Size of the inactive zone in the center where the effect is disabled (0-1).
proximity
number
Distance from the element edge where the effect activates.
spread
number
Spread angle of the glow effect in degrees.
variant
string
Color variant: 'default' or 'white'.
glow
boolean
Whether the glow effect is enabled.
class
string
CSS classes to apply to the effect container.
disabled
boolean
Whether the effect is disabled.
movementDuration
number
Duration of the movement animation in seconds.
borderWidth
number
Width of the glow border in pixels.
Examples
Basic Glowing Effect
Glowing Effect
Add subtle glowing effects to elements for enhanced visual appeal and depth
Glowing Card
Subtle glow effect that enhances visual hierarchy
<template>
<div class="relative rounded-xl bg-slate-800/50 border border-slate-700/50 p-6 h-48 w-full max-w-md mx-auto">
<MGlowingEffect
:glow="true"
:disabled="false"
class="rounded-xl"
/>
<div class="relative z-10 h-full flex flex-col justify-between">
<h3 class="text-lg font-bold text-white">
Basic Glowing Effect
</h3>
<p class="text-slate-400 text-sm">
Default glowing effect
</p>
</div>
</div>
</template>
Color Variants
White Variant
Monochrome glowing effect
<template>
<div class="relative rounded-xl bg-slate-800/50 border border-slate-700/50 p-6 h-48 w-full max-w-md mx-auto">
<MGlowingEffect
:glow="true"
:disabled="false"
variant="white"
class="rounded-xl"
/>
<div class="relative z-10 h-full flex flex-col justify-between">
<h3 class="text-lg font-bold text-white">
White Variant
</h3>
<p class="text-slate-400 text-sm">
Monochrome glowing effect
</p>
</div>
</div>
</template>
With Blur
Blurred Glow
Glowing effect with blur
<template>
<div class="relative rounded-xl bg-slate-800/50 border border-slate-700/50 p-6 h-48 w-full max-w-md mx-auto">
<MGlowingEffect
:glow="true"
:disabled="false"
:blur="6"
class="rounded-xl"
/>
<div class="relative z-10 h-full flex flex-col justify-between">
<h3 class="text-lg font-bold text-white">
Blurred Glow
</h3>
<p class="text-slate-400 text-sm">
Glowing effect with blur
</p>
</div>
</div>
</template>