{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "magic-card",
	"title": "Magic Card",
	"type": "registry:block",
	"description": "A spotlight effect that follows your mouse cursor and highlights borders on hover.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion, useMotionTemplate, useMotionValue } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\n\tinterface MagicCardProps {\n\t\t/** Card content */\n\t\tchildren?: Snippet;\n\t\t/** Additional CSS classes */\n\t\tclass?: string;\n\t\t/** Size of the gradient circle */\n\t\tgradientSize?: number;\n\t\t/** Color of the gradient overlay */\n\t\tgradientColor?: string;\n\t\t/** Opacity of the gradient overlay */\n\t\tgradientOpacity?: number;\n\t\t/** Starting color of the border gradient */\n\t\tgradientFrom?: string;\n\t\t/** Ending color of the border gradient */\n\t\tgradientTo?: string;\n\t}\n\n\tlet {\n\t\tchildren,\n\t\tclass: className,\n\t\tgradientSize = 200,\n\t\tgradientColor = \"#262626\",\n\t\tgradientOpacity = 0.8,\n\t\tgradientFrom = \"#9E7AFF\",\n\t\tgradientTo = \"#FE8BBB\",\n\t}: MagicCardProps = $props();\n\n\tlet mouseX = $derived(useMotionValue(-gradientSize));\n\tlet mouseY = $derived(useMotionValue(-gradientSize));\n\n\tlet borderGradient = $derived(\n\t\tuseMotionTemplate`radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientFrom}, ${gradientTo}, var(--border) 100%)`\n\t);\n\tlet overlayGradient = $derived(\n\t\tuseMotionTemplate`radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)`\n\t);\n\n\tconst reset = () => {\n\t\tmouseX.set(-gradientSize);\n\t\tmouseY.set(-gradientSize);\n\t};\n\n\tconst handlePointerMove = (e: PointerEvent) => {\n\t\tconst target = e.currentTarget as HTMLElement;\n\t\tconst rect = target.getBoundingClientRect();\n\t\tmouseX.set(e.clientX - rect.left);\n\t\tmouseY.set(e.clientY - rect.top);\n\t};\n\n\t// Reset on mount\n\t$effect(() => {\n\t\treset();\n\t});\n\n\t// Global event listeners\n\t$effect(() => {\n\t\tconst handleGlobalPointerOut = (e: PointerEvent) => {\n\t\t\tif (!e.relatedTarget) {\n\t\t\t\treset();\n\t\t\t}\n\t\t};\n\n\t\tconst handleVisibility = () => {\n\t\t\tif (document.visibilityState !== \"visible\") {\n\t\t\t\treset();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener(\"pointerout\", handleGlobalPointerOut);\n\t\twindow.addEventListener(\"blur\", reset);\n\t\tdocument.addEventListener(\"visibilitychange\", handleVisibility);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"pointerout\", handleGlobalPointerOut);\n\t\t\twindow.removeEventListener(\"blur\", reset);\n\t\t\tdocument.removeEventListener(\"visibilitychange\", handleVisibility);\n\t\t};\n\t});\n</script>\n\n<div\n\tclass={cn(\"group relative rounded-[inherit]\", className)}\n\tonpointermove={handlePointerMove}\n\tonpointerleave={reset}\n\tonpointerenter={reset}\n\trole=\"region\"\n>\n\t<motion.div\n\t\tclass=\"bg-border pointer-events-none absolute inset-0 rounded-[inherit] duration-300 group-hover:opacity-100\"\n\t\tstyle={{ background: borderGradient }}\n\t/>\n\t<div class=\"bg-background absolute inset-px rounded-[inherit]\"></div>\n\t<motion.div\n\t\tclass=\"pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n\t\tstyle={{ background: overlayGradient, opacity: gradientOpacity }}\n\t/>\n\t<div class=\"relative\">\n\t\t{#if children}\n\t\t\t{@render children()}\n\t\t{/if}\n\t</div>\n</div>\n",
			"type": "registry:component",
			"target": "magic/magic-card/magic-card.svelte"
		},
		{
			"content": "export { default as MagicCard } from \"./magic-card.svelte\";\n",
			"type": "registry:file",
			"target": "magic/magic-card/index.ts"
		}
	]
}