Animated Beam

Installation

npx shadcn@latest add "https://magicui.design/r/animated-beam"

Prop	Type	Default	Description
`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`	`0`	The curvature of the beam.
`reverse`	`boolean`	`false`	Whether the beam should be reversed.
`duration`	`number`	`5`	The duration of the beam.
`delay`	`number`	`0`	The delay of the beam.
`pathColor`	`string`	`gray`	The color of the beam.
`pathWidth`	`number`	`2`	The width of the beam.
`pathOpacity`	`number`	`0.2`	The opacity of the beam.
`gradientStartColor`	`string`	`#ffaa40`	The start color of the gradient.
`gradientStopColor`	`string`	`#9c40ff`	The stop color of the gradient.
`startXOffset`	`number`	`0`	The start x offset of the beam.
`startYOffset`	`number`	`0`	The start y offset of the beam.
`endXOffset`	`number`	`0`	The end x offset of the beam.
`endYOffset`	`number`	`0`	The end y offset of the beam.