{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "light-rays",
  "type": "registry:ui",
  "title": "Light Rays",
  "description": "A component with animated light rays which shine down from above.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/light-rays.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState, type CSSProperties } from \"react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface LightRaysProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>\n  count?: number\n  color?: string\n  blur?: number\n  speed?: number\n  length?: string\n}\n\ntype LightRay = {\n  id: string\n  left: number\n  rotate: number\n  width: number\n  swing: number\n  delay: number\n  duration: number\n  intensity: number\n}\n\nconst createRays = (count: number, cycle: number): LightRay[] => {\n  if (count <= 0) return []\n\n  return Array.from({ length: count }, (_, index) => {\n    const left = 8 + Math.random() * 84\n    const rotate = -28 + Math.random() * 56\n    const width = 160 + Math.random() * 160\n    const swing = 0.8 + Math.random() * 1.8\n    const delay = Math.random() * cycle\n    const duration = cycle * (0.75 + Math.random() * 0.5)\n    const intensity = 0.6 + Math.random() * 0.5\n\n    return {\n      id: `${index}-${Math.round(left * 10)}`,\n      left,\n      rotate,\n      width,\n      swing,\n      delay,\n      duration,\n      intensity,\n    }\n  })\n}\n\nconst Ray = ({\n  left,\n  rotate,\n  width,\n  swing,\n  delay,\n  duration,\n  intensity,\n}: LightRay) => {\n  return (\n    <motion.div\n      className=\"pointer-events-none absolute -top-[12%] left-[var(--ray-left)] h-[var(--light-rays-length)] w-[var(--ray-width)] origin-top -translate-x-1/2 rounded-full bg-linear-to-b from-[color-mix(in_srgb,var(--light-rays-color)_70%,transparent)] to-transparent opacity-0 mix-blend-screen blur-[var(--light-rays-blur)]\"\n      style={\n        {\n          \"--ray-left\": `${left}%`,\n          \"--ray-width\": `${width}px`,\n        } as CSSProperties\n      }\n      initial={{ rotate: rotate }}\n      animate={{\n        opacity: [0, intensity, 0],\n        rotate: [rotate - swing, rotate + swing, rotate - swing],\n      }}\n      transition={{\n        duration: duration,\n        repeat: Infinity,\n        ease: \"easeInOut\",\n        delay: delay,\n        repeatDelay: duration * 0.1,\n      }}\n    />\n  )\n}\n\nexport function LightRays({\n  className,\n  style,\n  count = 7,\n  color = \"rgba(160, 210, 255, 0.2)\",\n  blur = 36,\n  speed = 14,\n  length = \"70vh\",\n  ref,\n  ...props\n}: LightRaysProps) {\n  const [rays, setRays] = useState<LightRay[]>([])\n  const cycleDuration = Math.max(speed, 0.1)\n\n  useEffect(() => {\n    setRays(createRays(count, cycleDuration))\n  }, [count, cycleDuration])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"pointer-events-none absolute inset-0 isolate overflow-hidden rounded-[inherit]\",\n        className\n      )}\n      style={\n        {\n          \"--light-rays-color\": color,\n          \"--light-rays-blur\": `${blur}px`,\n          \"--light-rays-length\": length,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <div className=\"absolute inset-0 overflow-hidden\">\n        <div\n          aria-hidden\n          className=\"absolute inset-0 opacity-60\"\n          style={\n            {\n              background:\n                \"radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--light-rays-color) 45%, transparent), transparent 70%)\",\n            } as CSSProperties\n          }\n        />\n        <div\n          aria-hidden\n          className=\"absolute inset-0 opacity-60\"\n          style={\n            {\n              background:\n                \"radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--light-rays-color) 35%, transparent), transparent 75%)\",\n            } as CSSProperties\n          }\n        />\n        {rays.map((ray) => (\n          <Ray key={ray.id} {...ray} />\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}