Animated Beam
Draws an animated connection between any two elements.
- 1.5 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/animated-beam.jsonAdds components/velora/animated-beam.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
containerRef* | RefObject<HTMLElement | null> | — |
fromRef* | RefObject<HTMLElement | null> | — |
toRef* | RefObject<HTMLElement | null> | — |
curvatureVertical 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.