{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "meteors",
	"title": "Meteors",
	"type": "registry:block",
	"description": "A meteor shower effect component with customizable number of meteors and animated falling effects.",
	"css": {
		"@keyframes meteor": {
			"0%": {
				"transform": "rotate(var(--angle)) translateX(0)",
				"opacity": "1"
			},
			"70%": {
				"opacity": "1"
			},
			"100%": {
				"transform": "rotate(var(--angle)) translateX(-500px)",
				"opacity": "0"
			}
		}
	},
	"cssVars": {
		"theme": {
			"animate-meteor": "meteor 5s linear infinite"
		}
	},
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport { onMount } from \"svelte\";\n\n\tinterface Props {\n\t\tnumber?: number;\n\t\tminDelay?: number;\n\t\tmaxDelay?: number;\n\t\tminDuration?: number;\n\t\tmaxDuration?: number;\n\t\tangle?: number;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tnumber = 20,\n\t\tminDelay = 0.2,\n\t\tmaxDelay = 1.2,\n\t\tminDuration = 2,\n\t\tmaxDuration = 10,\n\t\tangle = 215,\n\t\tclass: className,\n\t}: Props = $props();\n\n\ttype MeteorStyle = {\n\t\tangle: string;\n\t\ttop: string;\n\t\tleft: string;\n\t\tanimationDelay: string;\n\t\tanimationDuration: string;\n\t};\n\n\tlet meteorStyles: MeteorStyle[] = $state([]);\n\n\tlet updateMeteors = () => {\n\t\tconst styles = [...new Array(number)].map(() => ({\n\t\t\tangle: -angle + \"deg\",\n\t\t\ttop: \"-5%\",\n\t\t\tleft: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,\n\t\t\tanimationDelay: Math.random() * (maxDelay - minDelay) + minDelay + \"s\",\n\t\t\tanimationDuration:\n\t\t\t\tMath.floor(Math.random() * (maxDuration - minDuration) + minDuration) + \"s\",\n\t\t}));\n\t\tmeteorStyles = styles;\n\t};\n\tonMount(() => {\n\t\tupdateMeteors();\n\t});\n</script>\n\n{#each meteorStyles as style, idx (idx)}\n\t<span\n\t\tstyle=\"--angle: {style.angle}; top: {style.top}; left: {style.left}; animation-delay: {style.animationDelay}; animation-duration: {style.animationDuration};\"\n\t\tclass={cn(\n\t\t\t\"animate-meteor pointer-events-none absolute size-0.5 rotate-(--angle) rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10]\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t<div\n\t\t\tclass=\"pointer-events-none absolute top-1/2 -z-10 h-px w-12.5 -translate-y-1/2 bg-linear-to-r from-zinc-500 to-transparent\"\n\t\t></div>\n\t</span>\n{/each}\n",
			"type": "registry:component",
			"target": "magic/meteors/meteors.svelte"
		},
		{
			"content": "import Meteors from \"./meteors.svelte\";\nexport { Meteors };\n",
			"type": "registry:file",
			"target": "magic/meteors/index.ts"
		}
	]
}