# GlowingEffect

> Mouse-proximity based glowing border effect with animated conic gradient.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: border, glow, mouse, gradient, conic, animation
- Docs: https://fancy-ui.rama.app/docs/components/glowing-effect
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/glowing-effect

## Import

```svelte
<script lang="ts">
  import { GlowingEffect } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { GlowingEffect } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## 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 |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { GlowingEffect } from "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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>
```