Effects Fancy Stable
GlowingEffect
Mouse-proximity based glowing border effect with animated conic gradient
Preview
svelte
<script lang="ts">
import { GlowingEffect } from 'fancy-ui-svelte';
</script>
<GlowingEffect disabled={false} />Installation
pnpm add fancy-ui-svelte
import { GlowingEffect } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { GlowingEffect } from 'fancy-ui-svelte';
</script>
<GlowingEffect />Examples
Basic Usage
svelte
<script lang="ts">
import { GlowingEffect } from "$lib/fancy-ui/glowing-effect";
</script>
<div class="bg-card relative max-w-md rounded-xl border p-8">
<GlowingEffect spread={40} glow disabled={false} />
<h3 class="mb-2 text-lg font-semibold">Hover near me</h3>
<p class="text-muted-foreground">Move your cursor near this card to see the glow effect.</p>
</div>White Variant
svelte
<script lang="ts">
import { GlowingEffect } from "$lib/fancy-ui/glowing-effect";
</script>
<div class="bg-card relative max-w-md rounded-xl border p-8">
<GlowingEffect spread={40} glow variant="white" disabled={false} />
<h3 class="mb-2 text-lg font-semibold">White glow</h3>
<p class="text-muted-foreground">A subtle white border glow variant.</p>
</div>With Blur
Add blur to the glow.
svelte
<script lang="ts">
import { GlowingEffect } from "$lib/fancy-ui/glowing-effect";
</script>
<div class="bg-card relative max-w-md rounded-xl border p-8">
<GlowingEffect spread={60} glow blur={6} proximity={100} disabled={false} />
<h3 class="mb-2 text-lg font-semibold">Blurred glow</h3>
<p class="text-muted-foreground">Wider spread and blur for a softer effect.</p>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
blur | number | 0 | Blur amount applied to the glow layer |
inactiveZone | number | 0.7 | Fraction of element radius where glow is inactive |
proximity | number | 0 | Extra pixel range outside element bounds where glow activates |
spread | number | 20 | Angular spread of the conic gradient in degrees |
variant | "default" | "white" | "default" | Color variant of the glow |
glow | boolean | false | Always show glow regardless of mouse position |
disabled | boolean | true | Disable the glowing effect |
movementDuration | number | 2 | Duration of the angle lerp animation |
borderWidth | number | 1 | Border width in pixels |
Links
Related components
An
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Effects Stable
Bo
BorderBeam
Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors
Effects Stable
Co
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Effects Stable