{
  "name": "animated-beam-curved-demo",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "animated-beam"
  ],
  "files": [
    {
      "path": "examples/animated-beam-curved-demo.tsx",
      "content": "import { Cloud, Laptop, ShieldCheck } from \"lucide-react\";\nimport React from \"react\";\nimport {\n  AnimatedBeam,\n  BeamContainer,\n  BeamNode,\n} from \"@/registry/default/ui/animated-beam\";\n\nexport default function AnimatedBeamCurvedDemo() {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const laptopRef = React.useRef<HTMLDivElement>(null);\n  const shieldRef = React.useRef<HTMLDivElement>(null);\n  const cloudRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <BeamContainer\n      ref={containerRef}\n      className=\"mx-auto flex w-full items-center justify-between rounded-xl border bg-background p-10 shadow-sm\"\n    >\n      <div className=\"flex flex-col items-center gap-2\">\n        <BeamNode\n          ref={laptopRef}\n          className=\"h-12 w-12 border-2 border-blue-500/20 bg-blue-500/10\"\n        >\n          <Laptop className=\"h-6 w-6 text-blue-600\" />\n        </BeamNode>\n        <span className=\"font-medium text-[10px] text-muted-foreground uppercase tracking-wider\">\n          Local\n        </span>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <BeamNode\n          ref={shieldRef}\n          className=\"h-14 w-14 border-2 border-emerald-500/20 bg-emerald-500/10\"\n        >\n          <ShieldCheck className=\"h-7 w-7 text-emerald-600\" />\n        </BeamNode>\n        <span className=\"font-medium text-[10px] text-muted-foreground uppercase tracking-wider\">\n          Encrypt\n        </span>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <BeamNode\n          ref={cloudRef}\n          className=\"h-12 w-12 border-2 border-sky-500/20 bg-sky-500/10\"\n        >\n          <Cloud className=\"h-6 w-6 text-sky-600\" />\n        </BeamNode>\n        <span className=\"font-medium text-[10px] text-muted-foreground uppercase tracking-wider\">\n          Cloud\n        </span>\n      </div>\n\n      <AnimatedBeam\n        containerRef={containerRef}\n        fromRef={laptopRef}\n        toRef={shieldRef}\n        duration={3}\n        curvature={0.4}\n        gradientStartColor=\"#3b82f6\"\n        gradientStopColor=\"#10b981\"\n      />\n      <AnimatedBeam\n        containerRef={containerRef}\n        fromRef={shieldRef}\n        toRef={cloudRef}\n        duration={3}\n        delay={0.5}\n        curvature={-0.4}\n        gradientStartColor=\"#10b981\"\n        gradientStopColor=\"#0ea5e9\"\n      />\n    </BeamContainer>\n  );\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ],
  "type": "registry:example"
}