Animated Beam

import * as React from "react";
import * as Icons from "lucide-react";
import { AnimatedBeam, BeamContainer, BeamNode } from "@/components/ui/animated-beam";

export default function AnimatedBeamCurvedDemo() {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const laptopRef = React.useRef<HTMLDivElement>(null);
  const shieldRef = React.useRef<HTMLDivElement>(null);
  const cloudRef = React.useRef<HTMLDivElement>(null);

  return (
    <BeamContainer
      ref={containerRef}
      className="mx-auto flex w-full items-center justify-between rounded-xl border bg-background p-10 shadow-sm"
    >
      <div className="flex flex-col items-center gap-2">
        <BeamNode ref={laptopRef} className="h-12 w-12 border-2 border-blue-500/20 bg-blue-500/10">
          <Icons.Laptop className="h-6 w-6 text-blue-600" />
        </BeamNode>
        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">Local</span>
      </div>

      <div className="flex flex-col items-center gap-2">
        <BeamNode ref={shieldRef} className="h-14 w-14 border-2 border-emerald-500/20 bg-emerald-500/10">
          <Icons.ShieldCheck className="h-7 w-7 text-emerald-600" />
        </BeamNode>
        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">Encrypt</span>
      </div>

      <div className="flex flex-col items-center gap-2">
        <BeamNode ref={cloudRef} className="h-12 w-12 border-2 border-sky-500/20 bg-sky-500/10">
          <Icons.Cloud className="h-6 w-6 text-sky-600" />
        </BeamNode>
        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">Cloud</span>
      </div>

      <AnimatedBeam containerRef={containerRef} fromRef={laptopRef} toRef={shieldRef} duration={3} curvature={0.4} gradientStartColor="#3b82f6" gradientStopColor="#10b981" />
      <AnimatedBeam containerRef={containerRef} fromRef={shieldRef} toRef={cloudRef} duration={3} delay={0.5} curvature={-0.4} gradientStartColor="#10b981" gradientStopColor="#0ea5e9" />
    </BeamContainer>
  );
}