{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "background-beams",
  "title": "Background Beams",
  "description": "Light beams flowing along curved paths behind content.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/background-beams.tsx",
      "content": "\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst noopSubscribe = () => () => {};\n\ninterface BackgroundBeamsProps {\n  className?: string;\n  /** Number of beams */\n  count?: number;\n}\n\n/**\n * Decorative light beams flowing along curved paths — a full-section\n * background. Place inside a `relative overflow-hidden` container.\n */\nexport function BackgroundBeams({ className, count = 7 }: BackgroundBeamsProps) {\n  // useReducedMotion() already knows the preference on the first client\n  // render, but the server can't — keep the animated markup until hydrated.\n  const hydrated = useSyncExternalStore(noopSubscribe, () => true, () => false);\n  const reducedMotion = useReducedMotion() === true && hydrated;\n\n  const paths = Array.from({ length: count }, (_, i) => {\n    const o = i * 90;\n    return `M-${300 + o} -${100 + i * 40} C ${-100 + o} ${120 + i * 30}, ${\n      200 + o\n    } ${180 + i * 30}, ${640 + o} ${440 + i * 40}`;\n  });\n\n  return (\n    <div\n      aria-hidden\n      data-slot=\"background-beams\"\n      className={cn(\"pointer-events-none absolute inset-0\", className)}\n    >\n      <svg\n        className=\"size-full\"\n        viewBox=\"0 0 960 540\"\n        fill=\"none\"\n        preserveAspectRatio=\"xMidYMid slice\"\n      >\n        {paths.map((d, i) => (\n          <path\n            key={`base-${i}`}\n            d={d}\n            stroke=\"var(--border)\"\n            strokeOpacity={0.35}\n            strokeWidth={1}\n          />\n        ))}\n        {!reducedMotion &&\n          paths.map((d, i) => (\n            <path\n              key={`beam-${i}`}\n              d={d}\n              stroke={`url(#beam-gradient-${i})`}\n              strokeWidth={1.5}\n              strokeLinecap=\"round\"\n            />\n          ))}\n        {!reducedMotion && (\n          <defs>\n            {paths.map((_, i) => (\n              <motion.linearGradient\n                key={`grad-${i}`}\n                id={`beam-gradient-${i}`}\n                gradientUnits=\"userSpaceOnUse\"\n                initial={{ x1: \"0%\", x2: \"5%\", y1: \"0%\", y2: \"5%\" }}\n                animate={{\n                  x1: [\"0%\", \"100%\"],\n                  x2: [\"5%\", \"105%\"],\n                  y1: [\"0%\", \"100%\"],\n                  y2: [\"5%\", \"105%\"],\n                }}\n                transition={{\n                  duration: 6 + (i % 4) * 2,\n                  delay: i * 1.1,\n                  repeat: Infinity,\n                  ease: \"linear\",\n                }}\n              >\n                <stop stopColor=\"var(--brand-from)\" stopOpacity=\"0\" />\n                <stop offset=\"30%\" stopColor=\"var(--brand-from)\" />\n                <stop offset=\"60%\" stopColor=\"var(--brand-to)\" />\n                <stop offset=\"100%\" stopColor=\"var(--brand-to)\" stopOpacity=\"0\" />\n              </motion.linearGradient>\n            ))}\n          </defs>\n        )}\n      </svg>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/background-beams.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "type": "registry:ui"
}