Animated Beam

Pro

SVG curved beam that animates between two ref'd elements. Used to visualise data flow in hero sections. Configurable curvature, speed, gradient colors, and direction.

Pro component — requires an active license. Get access →

🤖

⚡

💡

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add animated-beam

Usage

TSX

"use client"
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 items-center justify-between px-12 py-8">
      <div ref={fromRef} className="h-12 w-12 rounded-full border bg-card flex items-center justify-center">
        🤖
      </div>
      <div ref={toRef} className="h-12 w-12 rounded-full border bg-card flex items-center justify-center">
        💡
      </div>
      <AnimatedBeam containerRef={containerRef} fromRef={fromRef} toRef={toRef} />
    </div>
  )
}

Props

Prop	Type	Default	Required
containerRef	React.RefObject<HTMLElement \| null>	—	yes
fromRef	React.RefObject<HTMLElement \| null>	—	yes
toRef	React.RefObject<HTMLElement \| null>	—	yes
color	string	`"oklch(78% 0.17 200)"`	no
duration	number	`3`	no
delay	number	`0`	no
curvature	number	`0`	no
reverse	boolean	`false`	no
pathWidth	number	`2`	no
pathOpacity	number	`0.2`	no
gradientStartColor	string	`"oklch(78% 0.17 200)"`	no
gradientStopColor	string	`"oklch(78% 0.17 280)"`	no
className	string	—	no
startXOffset	number	`0`	no
startYOffset	number	`0`	no
endXOffset	number	`0`	no
endYOffset	number	`0`	no

Details

Source filecomponents/ui/animated-beam.tsx

Typeui

Categoriesanimations

npm dependencies

Registry deps

Claude skill—