{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video-text",
  "type": "registry:ui",
  "title": "Video Text",
  "description": "A component that displays text with a video playing in the background.",
  "files": [
    {
      "path": "registry/magicui/video-text.tsx",
      "content": "\"use client\"\n\nimport React, {\n  useEffect,\n  useState,\n  type ElementType,\n  type ReactNode,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface VideoTextProps {\n  /**\n   * The video source URL\n   */\n  src: string\n  /**\n   * Additional className for the container\n   */\n  className?: string\n  /**\n   * Whether to autoplay the video\n   */\n  autoPlay?: boolean\n  /**\n   * Whether to mute the video\n   */\n  muted?: boolean\n  /**\n   * Whether to loop the video\n   */\n  loop?: boolean\n  /**\n   * Whether to preload the video\n   */\n  preload?: \"auto\" | \"metadata\" | \"none\"\n  /**\n   * The content to display (will have the video \"inside\" it)\n   */\n  children: ReactNode\n  /**\n   * Font size for the text mask (in viewport width units)\n   * @default 10\n   */\n  fontSize?: string | number\n  /**\n   * Font weight for the text mask\n   * @default \"bold\"\n   */\n  fontWeight?: string | number\n  /**\n   * Text anchor for the text mask\n   * @default \"middle\"\n   */\n  textAnchor?: string\n  /**\n   * Dominant baseline for the text mask\n   * @default \"middle\"\n   */\n  dominantBaseline?: string\n  /**\n   * Font family for the text mask\n   * @default \"sans-serif\"\n   */\n  fontFamily?: string\n  /**\n   * The element type to render for the text\n   * @default \"div\"\n   */\n  as?: ElementType\n}\n\nexport function VideoText({\n  src,\n  children,\n  className = \"\",\n  autoPlay = true,\n  muted = true,\n  loop = true,\n  preload = \"auto\",\n  fontSize = 20,\n  fontWeight = \"bold\",\n  textAnchor = \"middle\",\n  dominantBaseline = \"middle\",\n  fontFamily = \"sans-serif\",\n  as: Component = \"div\",\n}: VideoTextProps) {\n  const [svgMask, setSvgMask] = useState(\"\")\n  const content = React.Children.toArray(children).join(\"\")\n\n  useEffect(() => {\n    const updateSvgMask = () => {\n      const responsiveFontSize =\n        typeof fontSize === \"number\" ? `${fontSize}vw` : fontSize\n      const 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      setSvgMask(newSvgMask)\n    }\n\n    updateSvgMask()\n    window.addEventListener(\"resize\", updateSvgMask)\n    return () => window.removeEventListener(\"resize\", updateSvgMask)\n  }, [content, fontSize, fontWeight, textAnchor, dominantBaseline, fontFamily])\n\n  const dataUrlMask = `url(\"data:image/svg+xml,${encodeURIComponent(svgMask)}\")`\n\n  return (\n    <Component className={cn(`relative size-full`, className)}>\n      {/* Create a container that masks the video to only show within text */}\n      <div\n        className=\"absolute inset-0 flex items-center justify-center\"\n        style={{\n          maskImage: dataUrlMask,\n          WebkitMaskImage: dataUrlMask,\n          maskSize: \"contain\",\n          WebkitMaskSize: \"contain\",\n          maskRepeat: \"no-repeat\",\n          WebkitMaskRepeat: \"no-repeat\",\n          maskPosition: \"center\",\n          WebkitMaskPosition: \"center\",\n        }}\n      >\n        <video\n          className=\"h-full w-full object-cover\"\n          autoPlay={autoPlay}\n          muted={muted}\n          loop={loop}\n          preload={preload}\n          playsInline\n        >\n          <source src={src} />\n          Your browser does not support the video tag.\n        </video>\n      </div>\n\n      {/* Add a backup text element for SEO/accessibility */}\n      <span className=\"sr-only\">{content}</span>\n    </Component>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}