Animated Beam

An animated beam of light component that travels along a path with smooth animations. Perfect for showcasing website integration features, connection flows, and interactive visual effects. Built with React, TypeScript, and Tailwind CSS.

Installation

npx uilayouts@latest add animated-beam

Props

PropTypeDescriptionDefault
classNamestringThe class name for the SVG element.-
containerRefRefObjectThe ref for the container element.-
fromRefRefObjectThe ref of the element from which the beam should start.-
toRefRefObjectThe ref of the element to which the beam should end.-
curvaturenumberThe curvature of the beam.0
reversebooleanWhether the beam should be reversed.false
durationnumberThe duration of the beam animation.Random (4-7)
delaynumberThe delay before the beam animation starts.0
pathColorstringThe color of the beam path."gray"
pathWidthnumberThe width of the beam path.2
pathOpacitynumberThe opacity of the beam path.0.2
gradientStartColorstringThe start color of the gradient for the beam."#4d40ff"
gradientStopColorstringThe stop color of the gradient for the beam."#4043ff"
startXOffsetnumberThe x offset of the beam's start position.0
startYOffsetnumberThe y offset of the beam's start position.0
endXOffsetnumberThe x offset of the beam's end position.0
endYOffsetnumberThe y offset of the beam's end position.0
dottedbooleanWhether the beam should be dotted.false
dotSpacingnumberThe spacing between dots if the beam is dotted.6

Example

Bidrectional

Unidrectional

Multiple Input

Multiple Output