Animated beam integration diagram

"use client"

import React, { forwardRef, useRef } from "react"
import { cn } from "@/lib/utils"
import { AnimatedBeam } from "@/components/magicui/animated-beam"

const Circle = forwardRef(({ className, children }, ref) => (
  <div ref={ref} className={cn("z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]", className)}>
    {children}
  </div>
))
Circle.displayName = "Circle"

export function AnimatedBeamDemo() {
  const containerRef = useRef(null)
  const div1Ref = useRef(null)
  const div2Ref = useRef(null)
  const centerRef = useRef(null)

  return (
    <div className="relative flex h-[300px] w-full items-center justify-center overflow-hidden p-10" ref={containerRef}>
      <div className="flex size-full max-w-lg flex-row items-center justify-between">
        <Circle ref={div1Ref}>A</Circle>
        <Circle ref={centerRef} className="size-16">Hub</Circle>
        <Circle ref={div2Ref}>B</Circle>
      </div>
      <AnimatedBeam containerRef={containerRef} fromRef={div1Ref} toRef={centerRef} />
      <AnimatedBeam containerRef={containerRef} fromRef={div2Ref} toRef={centerRef} reverse />
    </div>
  )
}