Path Beam

Component

About

An animated SVG beam of light that travels along the paths of a flow diagram, lighting up each step as it arrives, triggered on scroll-into-view, tied to scroll position, or driven by a progress value you control.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Path Beam to your project and fits it to your theme.

Code

How Path Beam is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { PathBeam } from "@/components/ui/path-beam";

export default function PathBeamDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-10">
      <div
        className="relative mx-auto w-full max-w-xl"
        role="img"
        aria-label="A sailor pays, the payment goes straight to the harbour's account"
      >
        <PathBeam
          viewBox="0 0 540 80"
          paths={["M 60 40 H 240", "M 300 40 H 480"]}
          className="absolute inset-0 size-full"
        />
        <div className="relative flex items-center justify-between">
          <div className="grid w-28 justify-items-center gap-1 rounded-lg border bg-card px-3 py-2 text-center">
            <span className="text-sm font-medium">Sailor</span>
            <span className="text-xs text-muted-foreground">
              pays their share
            </span>
          </div>
          <div className="grid w-28 justify-items-center gap-1 rounded-lg border bg-card px-3 py-2 text-center">
            <span className="text-sm font-medium">Payment</span>
            <span className="text-xs text-muted-foreground">
              instant transfer
            </span>
          </div>
          <div className="grid w-28 justify-items-center gap-1 rounded-lg border bg-card px-3 py-2 text-center">
            <span className="text-sm font-medium">Harbour</span>
            <span className="text-xs text-muted-foreground">account</span>
          </div>
        </div>
      </div>
    </div>
  );
}