Effects Fancy Stable
NeonBorder
Two-colour neon tube around its content: two beams with white-hot cores chase each other along a faint tube, their glow spilling inside and outside the edge, humming slowly after a flicker on ignition
Preview
svelte
<script lang="ts">
import { NeonBorder } from 'fancy-ui-svelte';
</script>
<NeonBorder />Installation
pnpm add fancy-ui-svelte
import { NeonBorder } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { NeonBorder } from 'fancy-ui-svelte';
</script>
<NeonBorder />Examples
Basic Usage
svelte
<script lang="ts">
import { NeonBorder } from "$lib/fancy-ui/neon-border";
</script>
<NeonBorder>
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-6 py-2">
<span class="text-sm font-medium">Neon Border</span>
</div>
</NeonBorder>Animation Types
Different animation styles.
svelte
<script lang="ts">
import { NeonBorder } from "$lib/fancy-ui/neon-border";
</script>
<div class="flex flex-wrap justify-center gap-6">
<NeonBorder animationType="none" class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">none (static)</span>
</div>
</NeonBorder>
<NeonBorder animationType="half" class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">half</span>
</div>
</NeonBorder>
<NeonBorder animationType="full" class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">full</span>
</div>
</NeonBorder>
</div>Custom Colors
svelte
<script lang="ts">
import { NeonBorder } from "$lib/fancy-ui/neon-border";
</script>
<div class="flex flex-wrap justify-center gap-6">
<NeonBorder color1="#22c55e" color2="#3b82f6" class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">Green → Blue</span>
</div>
</NeonBorder>
<NeonBorder color1="#f59e0b" color2="#ef4444" class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">Amber → Red</span>
</div>
</NeonBorder>
<NeonBorder color1="#a855f7" color2="#ec4899" class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">Purple → Pink</span>
</div>
</NeonBorder>
</div>Speed Variations
svelte
<script lang="ts">
import { NeonBorder } from "$lib/fancy-ui/neon-border";
</script>
<div class="flex flex-wrap justify-center gap-6">
<NeonBorder duration={2} class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">Fast (2s)</span>
</div>
</NeonBorder>
<NeonBorder duration={6} class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">Default (6s)</span>
</div>
</NeonBorder>
<NeonBorder duration={15} class="max-w-[200px]">
<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
<span class="text-xs">Slow (15s)</span>
</div>
</NeonBorder>
</div>Interactive Playground
svelte
<script lang="ts">
import { NeonBorder } from "$lib/fancy-ui/neon-border";
import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>
<PropsPlayground
controls={[
{ key: "color1", type: "color", label: "Color 1" },
{ key: "color2", type: "color", label: "Color 2" },
{
key: "animationType",
type: "select",
label: "Animation Type",
options: [
{ value: "none", label: "None (static)" },
{ value: "half", label: "Half" },
{ value: "full", label: "Full" },
],
},
{ key: "duration", type: "range", label: "Duration (s)", min: 1, max: 20, step: 1 },
]}
initialValues={{ color1: "#0496ff", color2: "#ff0a54", animationType: "half", duration: 6 }}
>
{#snippet preview(values)}
<div class="flex items-center justify-center py-8">
<NeonBorder
color1={values.color1 as string}
color2={values.color2 as string}
animationType={values.animationType as "none" | "half" | "full"}
duration={values.duration as number}
>
<div
class="bg-background flex h-full w-full items-center justify-center rounded-lg px-8 py-3"
>
<span class="font-medium">Neon Border</span>
</div>
</NeonBorder>
</div>
{/snippet}
</PropsPlayground>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color1 | string | "#0496ff" | First neon color |
color2 | string | "#ff0a54" | Second neon color |
animationType | "none" | "half" | "full" | "half" | How much of the tube is lit: none (two lit corners, static), half (two short beams chasing), full (two long beams that nearly close the ring) |
duration | number | 6 | Time for the beams to travel once around, in seconds |
Slots
| Slot | Description |
|---|---|
children | Content to display inside the neon border container |
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