{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "animated-gradient-text",
	"title": "Animated Gradient Text",
	"type": "registry:block",
	"description": "An animated gradient background which transitions between colors for text.",
	"css": {
		"@keyframes gradient": {
			"to": {
				"background-position": "var(--bg-size, 300%) 0"
			}
		}
	},
	"cssVars": {
		"theme": {
			"animate-gradient": "gradient 8s linear infinite"
		}
	},
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\n\ttype AnimatedGradientTextProps = {\n\t\tspeed?: number;\n\t\tcolorFrom?: string;\n\t\tcolorTo?: string;\n\t\tchildren: Snippet;\n\t\tclass?: string;\n\t\trest?: Record<string, any>;\n\t};\n\n\tlet {\n\t\tspeed = 1,\n\t\tcolorFrom = \"#ffaa40\",\n\t\tcolorTo = \"#9c40ff\",\n\t\tchildren,\n\t\tclass: className = \"\",\n\t\t...rest\n\t}: AnimatedGradientTextProps = $props();\n</script>\n\n<span\n\tstyle=\"--color-from:{colorFrom}; --color-to:{colorTo}; --bg-size:{300 * speed}%\"\n\t{...rest}\n\tclass={cn(\n\t\t`animate-gradient inline bg-linear-to-r from-(--color-from) via-(--color-to) to-(--color-from) bg-size-[var(--bg-size)_100%] bg-clip-text text-transparent`,\n\t\tclassName\n\t)}\n>\n\t{@render children?.()}\n</span>\n",
			"type": "registry:component",
			"target": "magic/animated-gradient-text/animated-gradient-text.svelte"
		},
		{
			"content": "import AnimatedGradientText from \"./animated-gradient-text.svelte\";\nexport { AnimatedGradientText };\n",
			"type": "registry:file",
			"target": "magic/animated-gradient-text/index.ts"
		}
	]
}