animated-beam-curved-demo

1import { Cloud, Laptop, ShieldCheck } 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 AnimatedBeamCurvedDemo() {
10  const containerRef = React.useRef<HTMLDivElement>(null);
11  const laptopRef = React.useRef<HTMLDivElement>(null);
12  const shieldRef = React.useRef<HTMLDivElement>(null);
13  const cloudRef = 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={laptopRef}
23          className="h-12 w-12 border-2 border-blue-500/20 bg-blue-500/10"
24        >
25          <Laptop className="h-6 w-6 text-blue-600" />
26        </BeamNode>
27        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
28          Local
29        </span>
30      </div>
31 
32      <div className="flex flex-col items-center gap-2">
33        <BeamNode
34          ref={shieldRef}
35          className="h-14 w-14 border-2 border-emerald-500/20 bg-emerald-500/10"
36        >
37          <ShieldCheck className="h-7 w-7 text-emerald-600" />
38        </BeamNode>
39        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
40          Encrypt
41        </span>
42      </div>
43 
44      <div className="flex flex-col items-center gap-2">
45        <BeamNode
46          ref={cloudRef}
47          className="h-12 w-12 border-2 border-sky-500/20 bg-sky-500/10"
48        >
49          <Cloud className="h-6 w-6 text-sky-600" />
50        </BeamNode>
51        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
52          Cloud
53        </span>
54      </div>
55 
56      <AnimatedBeam
57        containerRef={containerRef}
58        fromRef={laptopRef}
59        toRef={shieldRef}
60        duration={3}
61        curvature={0.4}
62        gradientStartColor="#3b82f6"
63        gradientStopColor="#10b981"
64      />
65      <AnimatedBeam
66        containerRef={containerRef}
67        fromRef={shieldRef}
68        toRef={cloudRef}
69        duration={3}
70        delay={0.5}
71        curvature={-0.4}
72        gradientStartColor="#10b981"
73        gradientStopColor="#0ea5e9"
74      />
75    </BeamContainer>
76  );
77}