{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "shimmering-text",
	"title": "Shimmering Text",
	"type": "registry:ui",
	"description": "A text component with an animated shimmer effect, optionally triggered when scrolled into view.",
	"dependencies": [
		"motion"
	],
	"devDependencies": [
		"motion@^12.38.0"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$.js\";\n\timport { animate, inView } from \"motion\";\n\n\tlet {\n\t\ttext,\n\t\tduration = 2,\n\t\tdelay = 0,\n\t\trepeat = true,\n\t\trepeatDelay = 0.5,\n\t\tclass: className,\n\t\tstartOnView = true,\n\t\tonce = false,\n\t\tinViewMargin,\n\t\tspread = 2,\n\t\tcolor,\n\t\tshimmerColor,\n\t}: {\n\t\t/** Text to display with the shimmer effect. */\n\t\ttext: string;\n\t\t/**\n\t\t * Duration of one shimmer sweep in seconds.\n\t\t * @default 2\n\t\t */\n\t\tduration?: number;\n\t\t/**\n\t\t * Seconds to wait before the first sweep begins.\n\t\t * @default 0\n\t\t */\n\t\tdelay?: number;\n\t\t/**\n\t\t * Whether the shimmer sweep loops indefinitely.\n\t\t * @default true\n\t\t */\n\t\trepeat?: boolean;\n\t\t/**\n\t\t * Pause between repeats in seconds when `repeat` is `true`.\n\t\t * @default 0.5\n\t\t */\n\t\trepeatDelay?: number;\n\t\t/** Extra classes merged onto the root `<span>`. */\n\t\tclass?: string;\n\t\t/**\n\t\t * When `true`, the animation only starts once the element scrolls into\n\t\t * view. When `false`, it begins on mount.\n\t\t * @default true\n\t\t */\n\t\tstartOnView?: boolean;\n\t\t/**\n\t\t * When `true`, the animation fires a single time and never again.\n\t\t * When `false`, it replays each time the element re-enters the viewport.\n\t\t * @default false\n\t\t */\n\t\tonce?: boolean;\n\t\t/**\n\t\t * Root margin passed to the underlying Motion `inView` observer — used\n\t\t * to shrink or expand the viewport trigger area (e.g. `\"0px 0px -10%\"`).\n\t\t */\n\t\tinViewMargin?: NonNullable<Parameters<typeof inView>[2]>[\"margin\"];\n\t\t/**\n\t\t * Spread multiplier applied to the shimmer highlight width. The final\n\t\t * spread scales with text length (`text.length * spread` pixels).\n\t\t * @default 2\n\t\t */\n\t\tspread?: number;\n\t\t/** Base text color. Defaults to `var(--muted-foreground)`. */\n\t\tcolor?: string;\n\t\t/** Highlight gradient color. Defaults to `var(--foreground)`. */\n\t\tshimmerColor?: string;\n\t} = $props();\n\n\tlet ref = $state<HTMLSpanElement>();\n\tlet isInView = $state(false);\n\tlet hasAnimated = $state(false);\n\tlet shimmerControls: ReturnType<typeof animate> | undefined;\n\tlet fadeControls: ReturnType<typeof animate> | undefined;\n\n\tlet dynamicSpread = $derived(text.length * spread);\n\tlet shouldAnimate = $derived(!startOnView || isInView);\n\n\t// Viewport detection\n\t$effect(() => {\n\t\tif (!ref) return;\n\t\treturn inView(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\tisInView = true;\n\t\t\t\tif (!once) {\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tisInView = false;\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ margin: inViewMargin }\n\t\t);\n\t});\n\n\t// Shimmer animation\n\t$effect(() => {\n\t\tif (!ref || !shouldAnimate) return;\n\t\thasAnimated = true;\n\n\t\tfadeControls = animate(ref, { opacity: [0, 1] }, { duration: 0.3, delay });\n\n\t\tshimmerControls = animate(\n\t\t\tref,\n\t\t\t{ backgroundPosition: [\"100% center\", \"0% center\"] },\n\t\t\t{\n\t\t\t\tduration,\n\t\t\t\tdelay,\n\t\t\t\trepeat: repeat ? Infinity : 0,\n\t\t\t\trepeatDelay,\n\t\t\t\tease: \"linear\",\n\t\t\t}\n\t\t);\n\n\t\treturn () => {\n\t\t\tshimmerControls?.stop();\n\t\t\tfadeControls?.stop();\n\t\t};\n\t});\n</script>\n\n<span\n\tbind:this={ref}\n\tdata-slot=\"shimmering-text\"\n\tclass={cn(\n\t\t\"relative inline-block bg-size-[250%_100%,auto] bg-clip-text text-transparent\",\n\t\t\"[--base-color:var(--muted-foreground)] [--shimmer-color:var(--foreground)]\",\n\t\t\"[background-repeat:no-repeat,padding-box]\",\n\t\t\"[--shimmer-bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--shimmer-color),transparent_calc(50%+var(--spread)))]\",\n\t\t\"dark:[--base-color:var(--muted-foreground)] dark:[--shimmer-color:var(--foreground)]\",\n\t\tclassName\n\t)}\n\tstyle:--spread=\"{dynamicSpread}px\"\n\tstyle:--base-color={color || undefined}\n\tstyle:--shimmer-color={shimmerColor || undefined}\n\tstyle:background-image=\"var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color))\"\n\tstyle:background-position={hasAnimated ? undefined : \"100% center\"}\n\tstyle:opacity={hasAnimated ? undefined : \"0\"}\n>\n\t{text}\n</span>\n",
			"type": "registry:ui",
			"target": "shimmering-text/shimmering-text.svelte"
		},
		{
			"content": "export { default as ShimmeringText } from \"./shimmering-text.svelte\";\n",
			"type": "registry:ui",
			"target": "shimmering-text/index.ts"
		}
	]
}