Animated Beam

An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

Installation

npx nyxbui@latest add animated-beam

Usage

To create an animated beam, you need a container element with a ref, and two elements with refs that the beam will travel between.

"use client";
 
import { AnimatedBeam } from "~/components/ui/animated-beam";
 
export default function AnimatedBeamDemo() {
  const containerRef = useRef<HTMLDivElement>(null);
  const div1Ref = useRef<HTMLDivElement>(null);
  const div2Ref = useRef<HTMLDivElement>(null);
 
  return (
    <div
      ref={containerRef}
      className="relative flex h-full w-full justify-between"
    >
      <AnimatedBeam
        containerRef={containerRef}
        fromRef={div1Ref}
        toRef={div2Ref}
      />
      <div
        ref={div1Ref}
        className="z-10 h-10 w-10 rounded-full bg-white shadow-xl"
      />
      <div
        ref={div2Ref}
        className="z-10 h-10 w-10 rounded-full bg-white shadow-xl"
      />
    </div>
  );
}

Examples

Animated Beam Uni-Directional

Animated Beam Bi-Directional

Animated Beam Multiple Inputs

Animated Beam Multiple Outputs

Props

Animated Beam

Prop	Type	Description	Default
className	string	The class name for the component.	-
containerRef	ref	The container ref.	-
fromRef	ref	The ref of the element from which the beam should start.	-
toRef	ref	The ref of the element to which the beam should end.	-
curvature	number	The curvature of the beam.	0
reverse	boolean	Whether the beam should be reversed.	false
duration	number	The duration of the beam.	5
delay	number	The delay of the beam.	0
pathColor	string	The color of the beam.	"gray"
pathWidth	number	The width of the beam.	2
pathOpacity	number	The opacity of the beam.	0.2
gradientStartColor	string	The start color of the gradient.	"#ffaa40"
gradientStopColor	string	The stop color of the gradient.	"#9c40ff"
startXOffset	number	The start x offset of the beam.	0
startYOffset	number	The start y offset of the beam.	0
endXOffset	number	The end x offset of the beam.	0
endYOffset	number	The end y offset of the beam.	0