Skip to main content

​
Installation

npx shadcn-svelte@latest add animated-beam

​
Usage

<script lang="ts">
  import AnimatedBeam from "$lib/components/magic/animated-beam/animated-beam.svelte";
  
  let containerRef: HTMLElement | null = $state(null);
  let fromRef: HTMLElement | null = $state(null);
  let toRef: HTMLElement | null = $state(null);
</script>

<div bind:this={containerRef} class="relative h-96">
  <div bind:this={fromRef} class="absolute left-10 top-10">
    Source Element
  </div>
  <div bind:this={toRef} class="absolute right-10 bottom-10">
    Target Element
  </div>
  <AnimatedBeam 
    {containerRef} 
    {fromRef} 
    {toRef} 
  />
</div>

​
Props

​
containerRef
HTMLElement | null
required
Reference to the container element that wraps both from and to elements.
​
fromRef
HTMLElement | null
required
Reference to the source element where the beam starts.
​
toRef
HTMLElement | null
required
Reference to the target element where the beam ends.
​
class
string
Additional CSS classes to apply to the SVG element.
​
curvature
number
default:"0"
Controls the curvature of the beam path. Higher values create more curved paths.
​
reverse
boolean
default:"false"
Reverses the animation direction of the gradient.
​
duration
number
default:"Math.random() * 3 + 4"
Duration of the beam animation in seconds.
​
delay
number
default:"0"
Delay before the animation starts in seconds.
​
pathColor
string
default:"'gray'"
Color of the static path line.
​
pathWidth
number
default:"2"
Width of the path stroke in pixels.
​
pathOpacity
number
default:"0.2"
Opacity of the static path line (0-1).
​
gradientStartColor
string
default:"'#ffaa40'"
Starting color of the animated gradient.
​
gradientStopColor
string
default:"'#9c40ff'"
Ending color of the animated gradient.
​
startXOffset
number
default:"0"
Horizontal offset from the source element’s position in pixels.
​
startYOffset
number
default:"0"
Vertical offset from the source element’s position in pixels.
​
endXOffset
number
default:"0"
Horizontal offset from the target element’s position in pixels.
​
endYOffset
number
default:"0"
Vertical offset from the target element’s position in pixels.

​
Examples

​
Custom Gradient Colors

<AnimatedBeam 
  {containerRef} 
  {fromRef} 
  {toRef}
  gradientStartColor="#3b82f6"
  gradientStopColor="#8b5cf6"
/>

​
Curved Path

<AnimatedBeam 
  {containerRef} 
  {fromRef} 
  {toRef}
  curvature={50}
/>

​
With Offsets

<AnimatedBeam 
  {containerRef} 
  {fromRef} 
  {toRef}
  startXOffset={10}
  startYOffset={10}
  endXOffset={-10}
  endYOffset={-10}
/>

​
Features

  • Automatically calculates the path between two elements
  • Smooth animated gradient effect
  • Responsive to element position changes
  • Customizable colors, curvature, and animation timing
  • Built-in resize observer for dynamic layouts

Build docs developers (and LLMs) love

Get started for freeTalk to us