Animated Beam Demo

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  const div3Ref = useRef<HTMLDivElement>(null)
32  const div4Ref = useRef<HTMLDivElement>(null)
33  const div5Ref = useRef<HTMLDivElement>(null)
34  const div6Ref = useRef<HTMLDivElement>(null)
35  const div7Ref = useRef<HTMLDivElement>(null)
36 
37  return (
38    <div
39      className="relative flex h-[300px] w-full items-center justify-center overflow-hidden p-10"
40      ref={containerRef}
41    >
42      <div className="flex size-full max-h-[200px] max-w-lg flex-col items-stretch justify-between gap-10">
43        <div className="flex flex-row items-center justify-between">
44          <Circle ref={div1Ref}>
45            <Icons.googleDrive />
46          </Circle>
47          <Circle ref={div5Ref}>
48            <Icons.googleDocs />
49          </Circle>
50        </div>
51        <div className="flex flex-row items-center justify-between">
52          <Circle ref={div2Ref}>
53            <Icons.notion />
54          </Circle>
55          <Circle ref={div4Ref} className="size-16">
56            <Icons.openai />
57          </Circle>
58          <Circle ref={div6Ref}>
59            <Icons.zapier />
60          </Circle>
61        </div>
62        <div className="flex flex-row items-center justify-between">
63          <Circle ref={div3Ref}>
64            <Icons.whatsapp />
65          </Circle>
66          <Circle ref={div7Ref}>
67            <Icons.messenger />
68          </Circle>
69        </div>
70      </div>
71 
72      <AnimatedBeam
73        containerRef={containerRef}
74        fromRef={div1Ref}
75        toRef={div4Ref}
76        curvature={-75}
77        endYOffset={-10}
78      />
79      <AnimatedBeam
80        containerRef={containerRef}
81        fromRef={div2Ref}
82        toRef={div4Ref}
83      />
84      <AnimatedBeam
85        containerRef={containerRef}
86// … truncated