"use client"; import { cn } from "@/lib/utils"; import { motion } from "framer-motion"; import { useEffect, useId, useState } from "react"; export interface AnimatedBeamProps { className?: string; containerRef: React.RefObject; fromRef: React.RefObject; toRef: React.RefObject; curvature?: number; reverse?: boolean; pathColor?: string; pathWidth?: number; pathOpacity?: number; gradientStartColor?: string; gradientStopColor?: string; delay?: number; duration?: number; startXOffset?: number; startYOffset?: number; endXOffset?: number; endYOffset?: number; } export const AnimatedBeam = ({ className, containerRef, fromRef, toRef, curvature = 0, reverse = false, duration = Math.random() * 3 + 4, delay = 0, pathColor = "gray", pathWidth = 2, pathOpacity = 0.2, gradientStartColor = "#ffaa40", gradientStopColor = "#9c40ff", startXOffset = 0, startYOffset = 0, endXOffset = 0, endYOffset = 0, }: AnimatedBeamProps) => { const id = useId(); const [pathD, setPathD] = useState(""); const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 }); // Calculate the bezier path useEffect(() => { const updatePath = () => { if (containerRef.current && fromRef.current && toRef.current) { const containerRect = containerRef.current.getBoundingClientRect(); const rectA = fromRef.current.getBoundingClientRect(); const rectB = toRef.current.getBoundingClientRect(); const svgWidth = containerRect.width; const svgHeight = containerRect.height; setSvgDimensions({ width: svgWidth, height: svgHeight }); const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset; const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset; const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset; const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset; const controlY = startY - curvature; const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`; setPathD(d); } }; // Initial update updatePath(); // Listen for resize const resizeObserver = new ResizeObserver(updatePath); if (containerRef.current) { resizeObserver.observe(containerRef.current); } return () => resizeObserver.disconnect(); }, [ containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset, ]); return ( ); };

Name	Type	Default	Description
`containerRef`	`RefObject`	`-`	Container ref.
`fromRef`	`RefObject`	`-`	Source element ref.
`toRef`	`RefObject`	`-`	Target element ref.
`duration`	`number`	`random`	Animation duration.

Animated Beam

Preview

Installation

Usage

Props

Variants