Docs
Animated Beam
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 |