{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "beam-background",
  "title": "Beam Background",
  "description": "Canvas-based animated light beam sweeps for dark hero sections",
  "files": [
    {
      "path": "registry/pioneerui/beam-background.tsx",
      "content": "\"use client\"\n\nimport React, { useId } from \"react\"\nimport { motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface BeamConfig {\n  left: string\n  width: number\n  duration: number\n  delay: number\n  color: string\n  opacity: number\n  height: string\n}\n\nconst DEFAULT_BEAMS: BeamConfig[] = [\n  { left: \"8%\",  width: 40,  duration: 8,  delay: 0,   color: \"#6366f1\", opacity: 0.55, height: \"60%\" },\n  { left: \"20%\", width: 25,  duration: 11, delay: 2.5, color: \"#a855f7\", opacity: 0.4,  height: \"45%\" },\n  { left: \"35%\", width: 55,  duration: 7,  delay: 1,   color: \"#3b82f6\", opacity: 0.45, height: \"70%\" },\n  { left: \"50%\", width: 30,  duration: 13, delay: 3.5, color: \"#ec4899\", opacity: 0.35, height: \"50%\" },\n  { left: \"62%\", width: 50,  duration: 9,  delay: 0.5, color: \"#8b5cf6\", opacity: 0.5,  height: \"65%\" },\n  { left: \"76%\", width: 20,  duration: 12, delay: 2,   color: \"#06b6d4\", opacity: 0.4,  height: \"40%\" },\n  { left: \"88%\", width: 45,  duration: 6,  delay: 4,   color: \"#6366f1\", opacity: 0.45, height: \"55%\" },\n]\n\nexport interface BeamBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n  beams?: Partial<BeamConfig>[]\n}\n\nfunction SingleBeam({ beam, id }: { beam: BeamConfig; id: string }) {\n  const gradientId = `beam-grad-${id}`\n\n  return (\n    <motion.div\n      className=\"pointer-events-none absolute top-0\"\n      style={{\n        left: beam.left,\n        width: beam.width,\n        height: beam.height,\n        opacity: beam.opacity,\n      }}\n      initial={{ y: \"-110%\" }}\n      animate={{ y: \"110vh\" }}\n      transition={{\n        duration: beam.duration,\n        delay: beam.delay,\n        repeat: Infinity,\n        ease: \"linear\",\n        repeatDelay: Math.random() * 2,\n      }}\n    >\n      <svg\n        width={beam.width}\n        height=\"100%\"\n        viewBox={`0 0 ${beam.width} 100`}\n        preserveAspectRatio=\"none\"\n        className=\"h-full w-full\"\n        aria-hidden\n      >\n        <defs>\n          <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor=\"transparent\" />\n            <stop offset=\"40%\" stopColor={beam.color} />\n            <stop offset=\"100%\" stopColor=\"transparent\" />\n          </linearGradient>\n        </defs>\n        <rect\n          x=\"0\"\n          y=\"0\"\n          width={beam.width}\n          height=\"100\"\n          fill={`url(#${gradientId})`}\n          style={{ filter: `blur(${Math.round(beam.width / 3)}px)` }}\n        />\n      </svg>\n    </motion.div>\n  )\n}\n\nexport function BeamBackground({\n  children,\n  className,\n  beams,\n  ...props\n}: BeamBackgroundProps) {\n  const baseId = useId()\n  const resolvedBeams: BeamConfig[] = beams\n    ? beams.map((b, i) => ({ ...DEFAULT_BEAMS[i % DEFAULT_BEAMS.length], ...b }))\n    : DEFAULT_BEAMS\n\n  return (\n    <div\n      className={cn(\n        \"relative flex min-h-[400px] w-full items-center justify-center overflow-hidden bg-zinc-950\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden\" aria-hidden>\n        {resolvedBeams.map((beam, i) => (\n          <SingleBeam key={i} beam={beam} id={`${baseId}-${i}`} />\n        ))}\n      </div>\n      {/* Bottom fade */}\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-zinc-950 to-transparent\" />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/beam-background.tsx"
    }
  ],
  "type": "registry:ui"
}