"use client"; import React, { useEffect, useId, useRef } from "react"; import { motion } from "framer-motion"; interface AnimatedBeamProps { containerRef: React.RefObject; fromRef: React.RefObject; toRef: React.RefObject; color?: string; duration?: number; delay?: number; pathColor?: string; pathWidth?: number; pathOpacity?: number; gradientStartColor?: string; gradientStopColor?: string; curvature?: number; reverse?: boolean; } function getRelativeCoords( containerRef: React.RefObject, elementRef: React.RefObject ) { if (!containerRef.current || !elementRef.current) return { x: 0, y: 0 }; const containerRect = containerRef.current.getBoundingClientRect(); const elementRect = elementRef.current.getBoundingClientRect(); return { x: elementRect.left - containerRect.left + elementRect.width / 2, y: elementRect.top - containerRect.top + elementRect.height / 2, }; } export function AnimatedBeam({ containerRef, fromRef, toRef, color = "#18B5FF", duration = 3, delay = 0, pathColor = "rgba(0,0,0,0.08)", pathWidth = 2, pathOpacity = 0.4, gradientStartColor, gradientStopColor, curvature = 0, reverse = false, }: AnimatedBeamProps) { const id = useId(); const svgRef = useRef(null); const pathRef = useRef(null); const [svgDims, setSvgDims] = React.useState({ width: 0, height: 0 }); const [from, setFrom] = React.useState({ x: 0, y: 0 }); const [to, setTo] = React.useState({ x: 0, y: 0 }); const startColor = gradientStartColor ?? color; const endColor = gradientStopColor ?? color; useEffect(() => { const update = () => { if (!containerRef.current) return; setSvgDims({ width: containerRef.current.offsetWidth, height: containerRef.current.offsetHeight, }); setFrom(getRelativeCoords(containerRef, fromRef)); setTo(getRelativeCoords(containerRef, toRef)); }; update(); const ro = new ResizeObserver(update); if (containerRef.current) ro.observe(containerRef.current); return () => ro.disconnect(); }, [containerRef, fromRef, toRef]); const cx = (from.x + to.x) / 2; const cy = (from.y + to.y) / 2 - curvature; const d = `M ${from.x},${from.y} Q ${cx},${cy} ${to.x},${to.y}`; return ( ); } // Demo wrapper — shows a hub connected to multiple nodes export default function AnimatedBeamDemo() { const containerRef = useRef(null); const hubRef = useRef(null); const node1Ref = useRef(null); const node2Ref = useRef(null); const node3Ref = useRef(null); const node4Ref = useRef(null); const nodeStyle: React.CSSProperties = { width: 48, height: 48, borderRadius: "50%", background: "#fff", border: "1.5px solid rgba(0,0,0,0.1)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, boxShadow: "0 2px 12px rgba(0,0,0,0.08)", position: "absolute", }; const hubStyle: React.CSSProperties = { ...nodeStyle, width: 64, height: 64, background: "#18B5FF", border: "none", color: "#fff", fontSize: 24, top: "50%", left: "50%", transform: "translate(-50%,-50%)", boxShadow: "0 0 24px rgba(24,181,255,0.4)", }; return (

⚡

🎨

🔮

🚀

✦

); }

Animated Beam