# GlowBorder

> Liquid-metal ring for a container's edge: two metallic conic fields turning against each other make iridescent reflections flow along a dark chrome border, while a glint rides around it and spills a soft glow; chromatic, silver and gold presets or custom tints.

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

## Import

```svelte
<script lang="ts">
  import { GlowBorder } 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 { GlowBorder } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `preset` | `"chromatic" \| "silver" \| "gold"` | `"chromatic"` | Metal palette: iridescent chrome, cool steel or warm gold |
| `color` | `string \| string[]` | — | Custom tints for the metal's reflections, woven with neutral metal tones; overrides preset |
| `strength` | `number` | `0.8` | Intensity of the glint and its glow, 0 to 1 |
| `borderRadius` | `number` | `10` | Border radius in pixels; the ring also inherits its parent's radius |
| `borderWidth` | `number` | `1.5` | Width of the metal ring in pixels |
| `duration` | `number` | `10` | Length of one flow cycle of the metal in seconds; the glint laps in 0.4x that |
| `class` | `string` | — | Additional classes on the overlay |

## Examples

### Basic Usage

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

<div class="bg-background relative flex h-40 w-64 items-center justify-center rounded-xl p-6">
	<p class="text-muted-foreground text-center">Content goes here</p>
	<GlowBorder />
</div>
```

### Presets

Iridescent chrome, cool steel or warm gold.

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

	const presets = ["chromatic", "silver", "gold"] as const;
</script>

<div class="flex flex-wrap justify-center gap-6">
	{#each presets as preset (preset)}
		<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
			<p class="text-muted-foreground text-center text-xs capitalize">{preset}</p>
			<GlowBorder {preset} />
		</div>
	{/each}
</div>
```

### Strength

How bright the glint and its glow are.

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

	const levels = [0.3, 0.8, 1];
</script>

<div class="flex flex-wrap justify-center gap-6">
	{#each levels as strength (strength)}
		<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
			<p class="text-muted-foreground text-center text-xs">strength {strength}</p>
			<GlowBorder {strength} />
		</div>
	{/each}
</div>
```

### Custom Colors

One colour tints the metal's reflections.

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

<div class="flex flex-wrap justify-center gap-6">
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">Cyan</p>
		<GlowBorder color="#00ffff" />
	</div>
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">Pink</p>
		<GlowBorder color="#ff00ff" />
	</div>
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">Gold</p>
		<GlowBorder color="#ffd700" />
	</div>
</div>
```

### Multi-Color Gradient

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

<div class="flex flex-wrap justify-center gap-6">
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">Blue → Purple</p>
		<GlowBorder color={["#3b82f6", "#8b5cf6"]} />
	</div>
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">Rainbow</p>
		<GlowBorder color={["#ff0000", "#ff7f00", "#ffff00", "#00ff00", "#0000ff", "#8b00ff"]} />
	</div>
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">Sunset</p>
		<GlowBorder color={["#f97316", "#ec4899", "#8b5cf6"]} />
	</div>
</div>
```

### Border Width

Adjust the ring's thickness.

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

<div class="flex flex-wrap justify-center gap-6">
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">1px</p>
		<GlowBorder borderWidth={1} color="#00ffff" />
	</div>
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">3px</p>
		<GlowBorder borderWidth={3} color="#00ffff" />
	</div>
	<div class="bg-background relative flex h-32 w-48 items-center justify-center rounded-xl p-4">
		<p class="text-muted-foreground text-center text-xs">5px</p>
		<GlowBorder borderWidth={5} color="#00ffff" />
	</div>
</div>
```

### Card Example

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

<div class="bg-card relative max-w-sm rounded-2xl border p-6">
	<GlowBorder borderRadius={16} color={["#3b82f6", "#8b5cf6", "#ec4899"]} borderWidth={2} />
	<h3 class="mb-2 text-lg font-semibold">Premium Feature</h3>
	<p class="text-muted-foreground mb-4 text-sm">
		This card has a beautiful animated glow border that draws attention.
	</p>
	<button
		class="bg-primary text-primary-foreground w-full rounded-lg px-4 py-2 text-sm font-medium"
	>
		Get Started
	</button>
</div>
```