{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "light-rays",
	"title": "Light Rays",
	"type": "registry:block",
	"description": "A component that creates animated light rays with customizable count, color, blur, speed, and length.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\n\tinterface LightRay {\n\t\tid: string;\n\t\tleft: number;\n\t\trotate: number;\n\t\twidth: number;\n\t\tswing: number;\n\t\tdelay: number;\n\t\tduration: number;\n\t\tintensity: number;\n\t}\n\n\tinterface LightRaysProps {\n\t\tclass?: string;\n\t\tcount?: number;\n\t\tcolor?: string;\n\t\tblur?: number;\n\t\tspeed?: number;\n\t\tlength?: string;\n\t\tstyle?: string;\n\t}\n\n\tlet {\n\t\tclass: className,\n\t\tcount = 7,\n\t\tcolor = \"rgba(160, 210, 255, 0.2)\",\n\t\tblur = 36,\n\t\tspeed = 14,\n\t\tlength = \"70vh\",\n\t\tstyle,\n\t\t...props\n\t}: LightRaysProps = $props();\n\n\tlet rays = $state<LightRay[]>([]);\n\tlet cycleDuration = $derived(Math.max(speed, 0.1));\n\n\tlet createRays = (count: number, cycle: number): LightRay[] => {\n\t\tif (count <= 0) return [];\n\n\t\treturn Array.from({ length: count }, (_, index) => {\n\t\t\tconst left = 8 + Math.random() * 84;\n\t\t\tconst rotate = -28 + Math.random() * 56;\n\t\t\tconst width = 160 + Math.random() * 160;\n\t\t\tconst swing = 0.8 + Math.random() * 1.8;\n\t\t\tconst delay = Math.random() * cycle;\n\t\t\tconst duration = cycle * (0.75 + Math.random() * 0.5);\n\t\t\tconst intensity = 0.6 + Math.random() * 0.5;\n\n\t\t\treturn {\n\t\t\t\tid: `${index}-${Math.round(left * 10)}`,\n\t\t\t\tleft,\n\t\t\t\trotate,\n\t\t\t\twidth,\n\t\t\t\tswing,\n\t\t\t\tdelay,\n\t\t\t\tduration,\n\t\t\t\tintensity,\n\t\t\t};\n\t\t});\n\t};\n\n\t// onMount(() => {\n\t// \trays = createRays(count, cycleDuration);\n\t// });\n\n\t$effect(() => {\n\t\trays = createRays(count, cycleDuration);\n\t});\n</script>\n\n<div\n\tclass={cn(\n\t\t\"pointer-events-none absolute inset-0 isolate overflow-hidden rounded-[inherit]\",\n\t\tclassName\n\t)}\n\tstyle=\"--light-rays-color: {color}; --light-rays-blur: {blur}px; --light-rays-length: {length}; {style ||\n\t\t''}\"\n\t{...props}\n>\n\t<div class=\"absolute inset-0 overflow-hidden\">\n\t\t<div\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"absolute inset-0 opacity-60\"\n\t\t\tstyle=\"background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--light-rays-color) 45%, transparent), transparent 70%)\"\n\t\t></div>\n\t\t<div\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"absolute inset-0 opacity-60\"\n\t\t\tstyle=\"background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--light-rays-color) 35%, transparent), transparent 75%)\"\n\t\t></div>\n\t\t{#each rays as ray (ray.id)}\n\t\t\t<motion.div\n\t\t\t\tclass=\"pointer-events-none absolute -top-[12%] h-(--light-rays-length) 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-(--light-rays-blur)\"\n\t\t\t\tstyle={{ left: `${ray.left}%`, width: `${ray.width}px` }}\n\t\t\t\tinitial={{ rotate: ray.rotate }}\n\t\t\t\tanimate={{\n\t\t\t\t\topacity: [0, ray.intensity, 0],\n\t\t\t\t\trotate: [\n\t\t\t\t\t\tray.rotate - ray.swing,\n\t\t\t\t\t\tray.rotate + ray.swing,\n\t\t\t\t\t\tray.rotate - ray.swing,\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t\ttransition={{\n\t\t\t\t\tduration: ray.duration,\n\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\tdelay: ray.delay,\n\t\t\t\t\trepeatDelay: ray.duration * 0.1,\n\t\t\t\t}}\n\t\t\t/>\n\t\t{/each}\n\t</div>\n</div>\n",
			"type": "registry:component",
			"target": "magic/light-rays/light-rays.svelte"
		},
		{
			"content": "import LightRays from \"./light-rays.svelte\";\nexport { LightRays };\n",
			"type": "registry:file",
			"target": "magic/light-rays/index.ts"
		}
	]
}