animated-beam-bidirectional-demo

1import { Server, User } from "lucide-react";
2import React from "react";
3import {
4  AnimatedBeam,
5  BeamContainer,
6  BeamNode,
7} from "@/registry/default/ui/animated-beam";
8 
9export default function AnimatedBeamBidirectionalDemo() {
10  const containerRef = React.useRef<HTMLDivElement>(null);
11  const userARef = React.useRef<HTMLDivElement>(null);
12  const userBRef = React.useRef<HTMLDivElement>(null);
13  const serverRef = React.useRef<HTMLDivElement>(null);
14 
15  return (
16    <BeamContainer
17      ref={containerRef}
18      className="mx-auto flex w-full items-center justify-between rounded-xl border bg-background p-10 shadow-sm"
19    >
20      <div className="flex flex-col items-center gap-2">
21        <BeamNode
22          ref={userARef}
23          className="h-12 w-12 border-2 border-blue-500/20 bg-blue-500/10"
24        >
25          <User className="h-6 w-6 text-blue-600" />
26        </BeamNode>
27        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
28          User A
29        </span>
30      </div>
31 
32      <div className="flex flex-col items-center gap-2">
33        <BeamNode
34          ref={serverRef}
35          className="h-16 w-16 border-2 border-purple-500/20 bg-purple-500/10"
36        >
37          <Server className="h-8 w-8 text-purple-600" />
38        </BeamNode>
39        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
40          Relay Server
41        </span>
42      </div>
43 
44      <div className="flex flex-col items-center gap-2">
45        <BeamNode
46          ref={userBRef}
47          className="h-12 w-12 border-2 border-amber-500/20 bg-amber-500/10"
48        >
49          <User className="h-6 w-6 text-amber-600" />
50        </BeamNode>
51        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
52          User B
53        </span>
54      </div>
55 
56      {/* User A <-> Server */}
57      <AnimatedBeam
58        containerRef={containerRef}
59        fromRef={userARef}
60        toRef={serverRef}
61        duration={3}
62        curvature={0.3}
63        gradientStartColor="#3b82f6"
64        gradientStopColor="#8b5cf6"
65      />
66      <AnimatedBeam
67        containerRef={containerRef}
68        fromRef={serverRef}
69        toRef={userARef}
70        duration={3}
71        delay={1.5}
72        curvature={0.3}
73        reverse
74        gradientStartColor="#8b5cf6"
75        gradientStopColor="#3b82f6"
76      />
77 
78      {/* User B <-> Server */}
79      <AnimatedBeam
80        containerRef={containerRef}
81// … truncated