← All components
Motion / effect
Animated Beam
Connect any pair of elements with flowing gradient light that follows a curved SVG path.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Adapted from Magic UI’s MIT-licensed Animated Beam. The original quadratic path, gradient stops and cubic-bezier easing are preserved.
- Pass refs to a positioned container and two descendants. The beam measures their centres; resize and scroll events update the path. Changes to layout without a resize or scroll need a React render or a new offset value.
- Import Demo.tsx for the complete four-connection workflow composition. Its icon artwork is included. Import AnimatedBeam.tsx when connecting your own elements.
- The animation uses a single owned clock per beam and performs no React render per frame. Pause excludes wall time; reduced motion displays a stationary gradient. Finite repeat counts stop scheduling after completion.
- Duration is bounded to 0.1–60s. The standalone source requires React and modern SVG/ResizeObserver, with no Tailwind or motion-library dependency.
React 19.2Modern browsers
Magic UI · MIT. See bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
containerRef (required) | RefObject<HTMLElement | null> | — | Positioned parent containing both nodes. |
fromRef (required) | RefObject<HTMLElement | null> | — | Starting element. |
toRef (required) | RefObject<HTMLElement | null> | — | Destination element. |
repeat | number | Infinity | Number of repeats after the first pass; 0 runs once. |
delay | number | 0 | Initial delay in seconds. |
repeatDelay | number | 0 | Delay between passes in seconds. |
paused | boolean | false | Freeze decorative motion; content remains usable. |
replayToken | number | 0 | Change to restart the effect. |