{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "video-text",
	"title": "Video Text",
	"type": "registry:block",
	"description": "A component that displays video content masked by text, creating a text-shaped video effect with customizable typography.",
	"dependencies": [
		"runed"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { onMount } from \"svelte\";\n\timport { cn } from \"$UTILS$\";\n\timport { watch } from \"runed\";\n\n\tinterface VideoTextProps {\n\t\tsrc: string;\n\t\tcontent: string;\n\t\tclass?: string;\n\t\tautoPlay?: boolean;\n\t\tmuted?: boolean;\n\t\tloop?: boolean;\n\t\tpreload?: \"auto\" | \"metadata\" | \"none\";\n\t\tfontSize?: string | number;\n\t\tfontWeight?: string | number;\n\t\ttextAnchor?: string;\n\t\tdominantBaseline?: string;\n\t\tfontFamily?: string;\n\t}\n\n\tlet {\n\t\tsrc,\n\t\tcontent,\n\t\tclass: className = \"\",\n\t\tautoPlay = true,\n\t\tmuted = true,\n\t\tloop = true,\n\t\tpreload = \"auto\",\n\t\tfontSize = 20,\n\t\tfontWeight = \"bold\",\n\t\ttextAnchor = \"middle\",\n\t\tdominantBaseline = \"middle\",\n\t\tfontFamily = \"sans-serif\",\n\t}: VideoTextProps = $props();\n\n\tlet svgMask = $state(\"\");\n\n\tlet updateSvgMask = () => {\n\t\tconst responsiveFontSize = typeof fontSize === \"number\" ? `${fontSize}vw` : fontSize;\n\t\tconst newSvgMask = `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><text x='50%' y='50%' font-size='${responsiveFontSize}' font-weight='${fontWeight}' text-anchor='${textAnchor}' dominant-baseline='${dominantBaseline}' font-family='${fontFamily}'>${content}</text></svg>`;\n\t\tsvgMask = newSvgMask;\n\t};\n\t// Handle window resize\n\tonMount(() => {\n\t\twindow.addEventListener(\"resize\", updateSvgMask);\n\t\t// return () => window.removeEventListener(\"resize\", updateSvgMask);\n\t});\n\n\tlet dataUrlMask = $derived(`url(\"data:image/svg+xml,${encodeURIComponent(svgMask)}\")`);\n\n\t// Update SVG mask when content or settings change\n\twatch(\n\t\t[\n\t\t\t() => content,\n\t\t\t() => fontSize,\n\t\t\t() => fontWeight,\n\t\t\t() => textAnchor,\n\t\t\t() => dominantBaseline,\n\t\t\t() => fontFamily,\n\t\t],\n\t\t() => {\n\t\t\tupdateSvgMask();\n\t\t}\n\t);\n</script>\n\n<div class={cn(\"relative size-full\", className)}>\n\t<!-- Create a container that masks the video to only show within text -->\n\t<div\n\t\tclass=\"absolute inset-0 flex items-center justify-center\"\n\t\tstyle=\"\n      mask-image: {dataUrlMask};\n      -webkit-mask-image: {dataUrlMask};\n      mask-size: contain;\n      -webkit-mask-size: contain;\n      mask-repeat: no-repeat;\n      -webkit-mask-repeat: no-repeat;\n      mask-position: center;\n      -webkit-mask-position: center;\n    \"\n\t>\n\t\t<video\n\t\t\tclass=\"h-full w-full object-cover\"\n\t\t\tautoplay={autoPlay}\n\t\t\t{muted}\n\t\t\t{loop}\n\t\t\t{preload}\n\t\t\tplaysinline\n\t\t>\n\t\t\t<source {src} />\n\t\t\tYour browser does not support the video tag.\n\t\t</video>\n\t</div>\n\n\t<!-- Add a backup text element for SEO/accessibility -->\n\t<span class=\"sr-only\">{content}</span>\n</div>\n",
			"type": "registry:component",
			"target": "magic/video-text/video-text.svelte"
		},
		{
			"content": "import VideoText from \"./video-text.svelte\";\nexport { VideoText };\n",
			"type": "registry:file",
			"target": "magic/video-text/index.ts"
		}
	]
}