{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "stagger-text",
	"title": "Stagger Text",
	"type": "registry:block",
	"description": "An interactive text component where characters animate vertically on hover with a staggered delay effect.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\" module>\n\texport const variants: Variants = {\n\t\tinitial: { y: 0 },\n\t\tanimate: (i: number) => ({\n\t\t\ty: \"-100%\",\n\t\t\ttransition: {\n\t\t\t\tdelay: i * 0.04,\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: \"easeInOut\",\n\t\t\t\ttype: \"tween\" as const,\n\t\t\t},\n\t\t}),\n\t\texit: (i: number) => ({\n\t\t\ty: 0,\n\t\t\ttransition: { delay: i * 0.02, duration: 0.3 },\n\t\t}),\n\t};\n</script>\n\n<script lang=\"ts\">\n\timport { motion, type Variants } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\n\ttype StaggerTextElement = \"span\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n\tinterface StaggerTextProps {\n\t\ttext: string;\n\t\tclass?: string;\n\t\tas?: StaggerTextElement;\n\t}\n\n\tlet { text = \"text\", class: className, as = \"h3\" }: StaggerTextProps = $props();\n\n\tlet MotionComponent = $derived(motion[as]);\n\n\tlet activeIndex = $state(5);\n\tlet isActive = $state(false);\n\n\tconst handleCopy = (e: ClipboardEvent) => {\n\t\te.preventDefault();\n\t\tif (e.clipboardData) {\n\t\t\te.clipboardData.setData(\"text/plain\", text);\n\t\t}\n\t};\n</script>\n\n<h1 class=\"sr-only\">\n\t{text}\n</h1>\n<MotionComponent\n\tclass={cn(\"overflow-clip tracking-wide select-text\", className)}\n\taria-label={text}\n\toncopy={handleCopy}\n>\n\t{#each text.split(\"\") as char, i (i)}\n\t\t{@const delay = Math.abs(activeIndex - i)}\n\t\t<motion.span\n\t\t\tclass=\"relative inline-flex flex-col\"\n\t\t\trole=\"presentation\"\n\t\t\tonmouseenter={() => {\n\t\t\t\tactiveIndex = i;\n\t\t\t\tisActive = true;\n\t\t\t}}\n\t\t\tonmouseleave={() => {\n\t\t\t\tactiveIndex = -1;\n\t\t\t\tisActive = false;\n\t\t\t}}\n\t\t>\n\t\t\t<!-- Original text -->\n\t\t\t<motion.span\n\t\t\t\tclass=\"h-fit select-none\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\t{variants}\n\t\t\t\tcustom={delay}\n\t\t\t\tinitial=\"initial\"\n\t\t\t\tanimate={isActive ? \"animate\" : \"exit\"}\n\t\t\t>\n\t\t\t\t{char === \" \" ? \" \" : char}\n\t\t\t</motion.span>\n\n\t\t\t<!-- Copy text (animated from below) -->\n\t\t\t<motion.span\n\t\t\t\tclass=\"absolute top-[0] left-0 h-fit w-full select-text\"\n\t\t\t\tstyle={{ translate: \"0 100%\" }}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\t{variants}\n\t\t\t\tcustom={delay}\n\t\t\t\tinitial=\"initial\"\n\t\t\t\tanimate={isActive ? \"animate\" : \"exit\"}\n\t\t\t>\n\t\t\t\t{char === \" \" ? \" \" : char}\n\t\t\t</motion.span>\n\t\t</motion.span>\n\t{/each}\n</MotionComponent>\n",
			"type": "registry:component",
			"target": "magic/stagger-text/stagger-text.svelte"
		},
		{
			"content": "export { default as StaggerText } from \"./stagger-text.svelte\";\n",
			"type": "registry:file",
			"target": "magic/stagger-text/index.ts"
		}
	]
}