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
Da
DatamoshTransition
Page-transition overlay that looks like a corrupted video decode: a fixed grid of columns, narrow on the left and wide on the right, fills with flat blocks of saturated colour that fall, snap open through the middle of the frame and squeeze shut again; cover() drops the columns over the page right to left and reveal() lets them fall away, both as promises for any router's navigation hook
Effects Stable