benflux/ui
WOW Effects

Animated Beam

An animated beam of light that travels along an SVG path between two elements. Perfect for visualizing data flows.

⚡
🎯

Installation

npx benflux-ui add beam

Usage

import { AnimatedBeam } from "@/components/ui/beam"
import { useRef } from "react"

export default function Example() {
  const containerRef = useRef<HTMLDivElement>(null)
  const fromRef = useRef<HTMLDivElement>(null)
  const toRef = useRef<HTMLDivElement>(null)

  return (
    <div ref={containerRef} className="relative">
      <div ref={fromRef}>Source</div>
      <div ref={toRef}>Target</div>
      <AnimatedBeam
        containerRef={containerRef}
        fromRef={fromRef}
        toRef={toRef}
        curvature={50}
        duration={3}
      />
    </div>
  )
}