{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "warp-background",
	"title": "Warp Background",
	"type": "registry:block",
	"description": "A 3D perspective grid background with animated light beams that create a warping effect.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\tinterface BeamProps {\n\t\twidth: string | number;\n\t\tx: string | number;\n\t\tdelay: number;\n\t\tduration: number;\n\t}\n\n\tinterface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {\n\t\tchildren: Snippet;\n\t\tclass?: string;\n\t\tperspective?: number;\n\t\tbeamsPerSide?: number;\n\t\tbeamSize?: number;\n\t\tbeamDelayMax?: number;\n\t\tbeamDelayMin?: number;\n\t\tbeamDuration?: number;\n\t\tgridColor?: string;\n\t}\n\n\tlet {\n\t\tchildren,\n\t\tperspective = 100,\n\t\tclass: className,\n\t\tbeamsPerSide = 3,\n\t\tbeamSize = 5,\n\t\tbeamDelayMax = 3,\n\t\tbeamDelayMin = 0,\n\t\tbeamDuration = 3,\n\t\tgridColor = \"var(--border)\",\n\t\t...props\n\t}: WarpBackgroundProps = $props();\n\n\tconst generateBeams = () => {\n\t\tconst beams = [];\n\t\tconst cellsPerSide = Math.floor(100 / beamSize);\n\t\tconst step = cellsPerSide / beamsPerSide;\n\n\t\tfor (let i = 0; i < beamsPerSide; i++) {\n\t\t\tconst x = Math.floor(i * step);\n\t\t\tconst delay = Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin;\n\t\t\tbeams.push({ x, delay });\n\t\t}\n\t\treturn beams;\n\t};\n\n\tconst topBeams = generateBeams();\n\tconst rightBeams = generateBeams();\n\tconst bottomBeams = generateBeams();\n\tconst leftBeams = generateBeams();\n\n\tconst containerStyle = $derived(`\n    --perspective: ${perspective}px;\n    --grid-color: ${gridColor};\n    --beam-size: ${beamSize}%;\n  `);\n</script>\n\n<div class={cn(\"relative rounded border p-20\", className)} {...props}>\n\t<div\n\t\tstyle={containerStyle}\n\t\tclass=\"@container-[size] pointer-events-none absolute top-0 left-0 size-full overflow-hidden [clipPath:inset(0)] perspective-(--perspective) transform-3d\"\n\t>\n\t\t<!-- top side -->\n\t\t<div\n\t\t\tclass=\"@container absolute z-20 h-[100cqmax] w-[100cqi] origin-[50%_0%] transform-[rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\"\n\t\t>\n\t\t\t{#each topBeams as beam, index}\n\t\t\t\t{@const hue = Math.floor(Math.random() * 360)}\n\t\t\t\t{@const ar = Math.floor(Math.random() * 10) + 1}\n\t\t\t\t<motion.div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\"--x\": `${beam.x * beamSize}%`,\n\t\t\t\t\t\t\"--width\": `${beamSize}%`,\n\t\t\t\t\t\t\"--aspect-ratio\": `${ar}`,\n\t\t\t\t\t\t\"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n\t\t\t\t\t}}\n\t\t\t\t\tclass=\"absolute top-0 left-(--x) aspect-[1/var(--aspect-ratio)] w-(--width) [background:var(--background)]\"\n\t\t\t\t\tinitial={{ y: \"100cqmax\", x: \"-50%\" }}\n\t\t\t\t\tanimate={{ y: \"-100%\", x: \"-50%\" }}\n\t\t\t\t\ttransition={{\n\t\t\t\t\t\tduration: beamDuration,\n\t\t\t\t\t\tdelay: beam.delay,\n\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\tease: \"linear\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t{/each}\n\t\t</div>\n\t\t<!-- bottom side -->\n\t\t<div\n\t\t\tclass=\"@container absolute top-full h-[100cqmax] w-[100cqi] origin-[50%_0%] transform-[rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\"\n\t\t>\n\t\t\t{#each bottomBeams as beam, index}\n\t\t\t\t{@const hue = Math.floor(Math.random() * 360)}\n\t\t\t\t{@const ar = Math.floor(Math.random() * 10) + 1}\n\t\t\t\t<motion.div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\"--x\": `${beam.x * beamSize}%`,\n\t\t\t\t\t\t\"--width\": `${beamSize}%`,\n\t\t\t\t\t\t\"--aspect-ratio\": `${ar}`,\n\t\t\t\t\t\t\"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n\t\t\t\t\t}}\n\t\t\t\t\tclass=\"absolute top-0 left-(--x) aspect-[1/var(--aspect-ratio)] w-(--width) [background:var(--background)]\"\n\t\t\t\t\tinitial={{ y: \"100cqmax\", x: \"-50%\" }}\n\t\t\t\t\tanimate={{ y: \"-100%\", x: \"-50%\" }}\n\t\t\t\t\ttransition={{\n\t\t\t\t\t\tduration: beamDuration,\n\t\t\t\t\t\tdelay: beam.delay,\n\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\tease: \"linear\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t{/each}\n\t\t</div>\n\t\t<!-- left side -->\n\t\t<div\n\t\t\tclass=\"@container absolute top-0 left-0 h-[100cqmax] w-[100cqh] origin-[0%_0%] transform-[rotate(90deg)_rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\"\n\t\t>\n\t\t\t{#each leftBeams as beam, index}\n\t\t\t\t{@const hue = Math.floor(Math.random() * 360)}\n\t\t\t\t{@const ar = Math.floor(Math.random() * 10) + 1}\n\t\t\t\t<motion.div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\"--x\": `${beam.x * beamSize}%`,\n\t\t\t\t\t\t\"--width\": `${beamSize}%`,\n\t\t\t\t\t\t\"--aspect-ratio\": `${ar}`,\n\t\t\t\t\t\t\"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n\t\t\t\t\t}}\n\t\t\t\t\tclass=\"absolute top-0 left-(--x) aspect-[1/var(--aspect-ratio)] w-(--width) [background:var(--background)]\"\n\t\t\t\t\tinitial={{ y: \"100cqmax\", x: \"-50%\" }}\n\t\t\t\t\tanimate={{ y: \"-100%\", x: \"-50%\" }}\n\t\t\t\t\ttransition={{\n\t\t\t\t\t\tduration: beamDuration,\n\t\t\t\t\t\tdelay: beam.delay,\n\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\tease: \"linear\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t{/each}\n\t\t</div>\n\t\t<!-- right side -->\n\t\t<div\n\t\t\tclass=\"@container absolute top-0 right-0 h-[100cqmax] w-[100cqh] origin-[100%_0%] transform-[rotate(-90deg)_rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\"\n\t\t>\n\t\t\t{#each rightBeams as beam, index}\n\t\t\t\t{@const hue = Math.floor(Math.random() * 360)}\n\t\t\t\t{@const ar = Math.floor(Math.random() * 10) + 1}\n\t\t\t\t<motion.div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\"--x\": `${beam.x * beamSize}%`,\n\t\t\t\t\t\t\"--width\": `${beamSize}%`,\n\t\t\t\t\t\t\"--aspect-ratio\": `${ar}`,\n\t\t\t\t\t\t\"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n\t\t\t\t\t}}\n\t\t\t\t\tclass=\"absolute top-0 left-(--x) aspect-[1/var(--aspect-ratio)] w-(--width) [background:var(--background)]\"\n\t\t\t\t\tinitial={{ y: \"100cqmax\", x: \"-50%\" }}\n\t\t\t\t\tanimate={{ y: \"-100%\", x: \"-50%\" }}\n\t\t\t\t\ttransition={{\n\t\t\t\t\t\tduration: beamDuration,\n\t\t\t\t\t\tdelay: beam.delay,\n\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\tease: \"linear\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t{/each}\n\t\t</div>\n\t</div>\n\t<div class=\"relative\">\n\t\t{@render children()}\n\t</div>\n</div>\n",
			"type": "registry:component",
			"target": "magic/warp-background/warp-background.svelte"
		},
		{
			"content": "export { default as WarpBackground } from \"./warp-background.svelte\";\n",
			"type": "registry:file",
			"target": "magic/warp-background/index.ts"
		}
	]
}