Effects Fancy Stable
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Preview
svelte
<script lang="ts">
import { AnimatedBeam } from "fancy-ui-svelte";
let containerRef: HTMLElement;
let div1Ref: HTMLElement;
let div2Ref: HTMLElement;
let div3Ref: HTMLElement;
let div4Ref: HTMLElement;
let div5Ref: HTMLElement;
let div6Ref: HTMLElement;
let div7Ref: HTMLElement;
</script>
<div
bind:this={containerRef}
class="bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
>
<div class="flex size-full max-h-[200px] max-w-lg flex-col items-stretch justify-between gap-10">
<div class="flex flex-row items-center justify-between">
<div
bind:this={div1Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-blue-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">1</span>
</div>
<div
bind:this={div5Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-green-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">5</span>
</div>
</div>
<div class="flex flex-row items-center justify-between">
<div
bind:this={div2Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-purple-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">2</span>
</div>
<div
bind:this={div4Ref}
class="z-10 flex size-16 items-center justify-center rounded-full border-2 bg-orange-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-lg font-bold text-white">HUB</span>
</div>
<div
bind:this={div6Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-pink-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">6</span>
</div>
</div>
<div class="flex flex-row items-center justify-between">
<div
bind:this={div3Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-red-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">3</span>
</div>
<div
bind:this={div7Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-teal-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">7</span>
</div>
</div>
</div>
{#if containerRef && div1Ref && div4Ref}
<AnimatedBeam
{containerRef}
fromRef={div1Ref}
toRef={div4Ref}
curvature={-75}
endYOffset={-10}
/>
{/if}
{#if containerRef && div2Ref && div4Ref}
<AnimatedBeam {containerRef} fromRef={div2Ref} toRef={div4Ref} />
{/if}
{#if containerRef && div3Ref && div4Ref}
<AnimatedBeam {containerRef} fromRef={div3Ref} toRef={div4Ref} curvature={75} endYOffset={10} />
{/if}
{#if containerRef && div5Ref && div4Ref}
<AnimatedBeam
{containerRef}
fromRef={div5Ref}
toRef={div4Ref}
curvature={-75}
endYOffset={-10}
reverse={true}
/>
{/if}
{#if containerRef && div6Ref && div4Ref}
<AnimatedBeam {containerRef} fromRef={div6Ref} toRef={div4Ref} reverse={true} />
{/if}
{#if containerRef && div7Ref && div4Ref}
<AnimatedBeam
{containerRef}
fromRef={div7Ref}
toRef={div4Ref}
curvature={75}
endYOffset={10}
reverse={true}
/>
{/if}
</div>Installation
pnpm add fancy-ui-svelte
import { AnimatedBeam } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { AnimatedBeam } from 'fancy-ui-svelte';
</script>
<AnimatedBeam />Examples
Basic Usage
svelte
<script lang="ts">
import { AnimatedBeam } from "$lib/fancy-ui/animated-beam";
let containerRef: HTMLElement;
let div1Ref: HTMLElement;
let div2Ref: HTMLElement;
let div3Ref: HTMLElement;
let div4Ref: HTMLElement;
let div5Ref: HTMLElement;
let div6Ref: HTMLElement;
let div7Ref: HTMLElement;
</script>
<div
bind:this={containerRef}
class="bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border p-10 md:shadow-xl"
>
<div class="flex size-full max-h-[200px] max-w-lg flex-col items-stretch justify-between gap-10">
<div class="flex flex-row items-center justify-between">
<div
bind:this={div1Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-blue-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">1</span>
</div>
<div
bind:this={div5Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-green-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">5</span>
</div>
</div>
<div class="flex flex-row items-center justify-between">
<div
bind:this={div2Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-purple-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">2</span>
</div>
<div
bind:this={div4Ref}
class="z-10 flex size-16 items-center justify-center rounded-full border-2 bg-orange-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-lg font-bold text-white">HUB</span>
</div>
<div
bind:this={div6Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-pink-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">6</span>
</div>
</div>
<div class="flex flex-row items-center justify-between">
<div
bind:this={div3Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-red-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">3</span>
</div>
<div
bind:this={div7Ref}
class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-teal-500 p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
>
<span class="text-sm font-bold text-white">7</span>
</div>
</div>
</div>
{#if containerRef && div1Ref && div4Ref}
<AnimatedBeam
{containerRef}
fromRef={div1Ref}
toRef={div4Ref}
curvature={-75}
endYOffset={-10}
/>
{/if}
{#if containerRef && div2Ref && div4Ref}
<AnimatedBeam {containerRef} fromRef={div2Ref} toRef={div4Ref} />
{/if}
{#if containerRef && div3Ref && div4Ref}
<AnimatedBeam {containerRef} fromRef={div3Ref} toRef={div4Ref} curvature={75} endYOffset={10} />
{/if}
{#if containerRef && div5Ref && div4Ref}
<AnimatedBeam
{containerRef}
fromRef={div5Ref}
toRef={div4Ref}
curvature={-75}
endYOffset={-10}
reverse={true}
/>
{/if}
{#if containerRef && div6Ref && div4Ref}
<AnimatedBeam {containerRef} fromRef={div6Ref} toRef={div4Ref} reverse={true} />
{/if}
{#if containerRef && div7Ref && div4Ref}
<AnimatedBeam
{containerRef}
fromRef={div7Ref}
toRef={div4Ref}
curvature={75}
endYOffset={10}
reverse={true}
/>
{/if}
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
containerRef * | HTMLElement | - | Reference to the container element that holds both endpoints |
fromRef * | HTMLElement | - | Reference to the source element |
toRef * | HTMLElement | - | Reference to the destination element |
curvature | number | 0 | Vertical curvature of the beam path |
reverse | boolean | false | Reverse the animation direction |
pathColor | string | "gray" | Color of the static background path |
pathWidth | number | 2 | Stroke width of the path |
pathOpacity | number | 0.2 | Opacity of the background path |
gradientStartColor | string | "#FFAA40" | Start color of the animated gradient |
gradientStopColor | string | "#9C40FF" | End color of the animated gradient |
delay | number | 0 | Animation delay in seconds |
duration | number | random 4-7 | Animation duration in seconds |
startXOffset | number | 0 | Horizontal offset for the start point |
startYOffset | number | 0 | Vertical offset for the start point |
endXOffset | number | 0 | Horizontal offset for the end point |
endYOffset | number | 0 | Vertical offset for the end point |
Links
Related components
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
Fi
FireworksHdr
GPU fireworks background with a deterministic, DOM-free physics core (rockets, peony/willow/ring/glyph shells, sparks, embers, smoke) rendered by a WebGPU engine into a wide-gamut, extended-tone-mapping canvas so bursts and comet trails burn brighter than SDR white on HDR displays, degrading silently through a WebGL2 fallback and a soft-knee SDR path everywhere else
Effects Stable