{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "scroll-progress",
	"title": "Scroll Progress",
	"type": "registry:block",
	"description": "A fixed progress bar component that indicates page scroll progress with a gradient color effect.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion, useScroll } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\n\tinterface ScrollProgressProps {\n\t\tclass?: string;\n\t}\n\n\tlet { class: className }: ScrollProgressProps = $props();\n\n\tlet scroll = $derived(useScroll());\n</script>\n\n<motion.div\n\tclass={cn(\n\t\t\"fixed inset-x-0 top-0 z-50 h-1 origin-top-left bg-linear-to-r from-[#A97CF8] via-[#F38CB8] to-[#FDCC92]\",\n\t\tclassName\n\t)}\n\tstyle={{\n\t\tscaleX: scroll.scrollYProgress,\n\t}}\n/>\n",
			"type": "registry:component",
			"target": "magic/scroll-progress/scroll-progress.svelte"
		},
		{
			"content": "import ScrollProgress from \"./scroll-progress.svelte\";\nexport { ScrollProgress };\n",
			"type": "registry:file",
			"target": "magic/scroll-progress/index.ts"
		}
	]
}