Animated Beam

A beautiful component that shoots a glowing gradient pulse along an SVG path connecting two HTML elements. It mathematically calculates the path curves automatically based on the live geometry and position of the DOM nodes using ResizeObserver.

Live Preview

💻

📦

🚀

☁️

Installation

CLI

npx @modus-ui/cli add animated-beam

Manual

Copy the code from the component tab.
Create a file at components/ui/animated-beam.tsx.
Paste the code.

Usage

tsx

import { useRef } from "react";
import { AnimatedBeam } from "@/components/ui/animated-beam";

export default function Example() {
  const containerRef = useRef<HTMLDivElement>(null);
  const fromRef = useRef<HTMLDivElement>(null);
  const toRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="relative flex justify-between p-10">
      <div ref={fromRef}>Node A</div>
      <div ref={toRef}>Node B</div>
      <AnimatedBeam containerRef={containerRef} fromRef={fromRef} toRef={toRef} curvature={-50} />
    </div>
  );
}

Props

Prop	Type	Default	Description
`containerRef`	`RefObject<HTMLElement \| null>`	-	The container both elements sit in.
`fromRef`	`RefObject<HTMLElement \| null>`	-	The element the beam starts at.
`toRef`	`RefObject<HTMLElement \| null>`	-	The element the beam ends at.
`curvature`	`number`	`0`	Bend of the path in pixels.
`reverse`	`boolean`	`false`	Runs the beam from end to start.
`duration`	`number`	`3`	Seconds for one beam pass.
`delay`	`number`	`0`	Seconds before the beam starts.
`pathColor`	`string`	`"hsl(var(--border))"`	Colour of the static path.
`gradientStart`	`string`	`"hsl(var(--primary))"`	Start colour of the beam.
`gradientStop`	`string`	`"hsl(var(--primary))"`	End colour of the beam.

Animated Beam

Installation

CLI

Manual

Usage

Props

Comments