Effects Fancy Stable
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
Preview
svelte
<script lang="ts">
import { GlowBorder } from 'fancy-ui-svelte';
</script>
<GlowBorder />Installation
pnpm add fancy-ui-svelte
import { GlowBorder } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { GlowBorder } from 'fancy-ui-svelte';
</script>
<GlowBorder />Examples
Basic Usage
svelte
<script lang="ts">
import { GlowBorder } from "$lib/fancy-ui/glow-border";
</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 "$lib/fancy-ui/glow-border";
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 "$lib/fancy-ui/glow-border";
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 "$lib/fancy-ui/glow-border";
</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 "$lib/fancy-ui/glow-border";
</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 "$lib/fancy-ui/glow-border";
</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 "$lib/fancy-ui/glow-border";
</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>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 |
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