Animated Beam

Draws an animated connection between any two elements.

1.5 KB gzipped
Deps: motion/react
Reduced-motion safe
Base UI & Radix compatible

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/animated-beam.json

Adds components/velora/animated-beam.tsx, installs motion.

Props

Prop	Type	Default
`containerRef*`	`RefObject<HTMLElement \| null>`	`—`
`fromRef*`	`RefObject<HTMLElement \| null>`	`—`
`toRef*`	`RefObject<HTMLElement \| null>`	`—`
`curvature` Vertical bend of the beam in px (positive bends up)	`number`	`0`
`reverse`	`boolean`	`false`
`duration`	`number`	`5`
`delay`	`number`	`0`
`pathWidth`	`number`	`2`
`pathOpacity`	`number`	`0.15`
`gradientStartColor`	`string`	`"#8b5cf6"`
`gradientStopColor`	`string`	`"#22d3ee"`
`className`	`string`	`—`

Accessibility

Reduced motion: The pulse stops; each connection shows a still gradient stroke along the full path.
Keyboard: Decorative — nothing to operate.
Screen readers: Decorative; the svg is aria-hidden.