animated-beam-demo

1import { Bot, Search, User, Zap } 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 AnimatedBeamDemo() {
10  const containerRef = React.useRef<HTMLDivElement>(null);
11  const userRef = React.useRef<HTMLDivElement>(null);
12  const aiRef = React.useRef<HTMLDivElement>(null);
13  const searchRef = React.useRef<HTMLDivElement>(null);
14  const resultRef = React.useRef<HTMLDivElement>(null);
15 
16  return (
17    <BeamContainer
18      ref={containerRef}
19      className="mx-auto flex w-full items-center justify-between rounded-xl border bg-background p-10 shadow-sm"
20    >
21      <div className="flex flex-col items-center gap-2">
22        <BeamNode
23          ref={userRef}
24          className="h-12 w-12 border-2 border-blue-500/20 bg-blue-500/10"
25        >
26          <User className="h-6 w-6 text-blue-600" />
27        </BeamNode>
28        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
29          User
30        </span>
31      </div>
32 
33      <div className="flex flex-col items-center gap-2">
34        <BeamNode
35          ref={aiRef}
36          className="h-16 w-16 border-2 border-purple-500/20 bg-purple-500/10 shadow-[0_0_15px_rgba(168,85,247,0.2)]"
37        >
38          <Bot className="h-8 w-8 text-purple-600" />
39        </BeamNode>
40        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
41          AI Agent
42        </span>
43      </div>
44 
45      <div className="flex flex-col gap-8">
46        <div className="flex flex-col items-center gap-2">
47          <BeamNode
48            ref={searchRef}
49            className="h-12 w-12 border-2 border-amber-500/20 bg-amber-500/10"
50          >
51            <Search className="h-5 w-5 text-amber-600" />
52          </BeamNode>
53          <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
54            Search
55          </span>
56        </div>
57        <div className="flex flex-col items-center gap-2">
58          <BeamNode
59            ref={resultRef}
60            className="h-12 w-12 border-2 border-emerald-500/20 bg-emerald-500/10"
61          >
62            <Zap className="h-5 w-5 text-emerald-600" />
63          </BeamNode>
64          <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
65            Result
66          </span>
67        </div>
68      </div>
69 
70      <AnimatedBeam
71// … truncated