Animated Beam Unidirectional

1"use client"
2 
3import React, { forwardRef, useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6import { AnimatedBeam } from "@/registry/magicui/animated-beam"
7 
8const Circle = forwardRef<
9  HTMLDivElement,
10  { className?: string; children?: React.ReactNode }
11>(({ className, children }, ref) => {
12  return (
13    <div
14      ref={ref}
15      className={cn(
16        "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)]",
17        className
18      )}
19    >
20      {children}
21    </div>
22  )
23})
24 
25Circle.displayName = "Circle"
26 
27export default function AnimatedBeamDemo() {
28  const containerRef = useRef<HTMLDivElement>(null)
29  const div1Ref = useRef<HTMLDivElement>(null)
30  const div2Ref = useRef<HTMLDivElement>(null)
31 
32  return (
33    <div
34      className="relative flex w-full max-w-[500px] items-center justify-center overflow-hidden p-10"
35      ref={containerRef}
36    >
37      <div className="flex size-full flex-col items-stretch justify-between gap-10">
38        <div className="flex flex-row justify-between">
39          <Circle ref={div1Ref}>
40            <Icons.user />
41          </Circle>
42          <Circle ref={div2Ref}>
43            <Icons.openai />
44          </Circle>
45        </div>
46      </div>
47 
48      <AnimatedBeam
49        duration={3}
50        containerRef={containerRef}
51        fromRef={div1Ref}
52        toRef={div2Ref}
53      />
54    </div>
55  )
56}
57 
58const Icons = {
59  openai: () => (
60    <svg
61      width="24"
62      height="24"
63      viewBox="0 0 24 24"
64      xmlns="http://www.w3.org/2000/svg"
65    >
66// … truncated