{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-gif",
  "title": "Text GIF",
  "description": "Animated text filled with a GIF, so the letters show a moving picture inside.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/clover-ui/text-gif.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TextGifProps extends React.HTMLAttributes<HTMLSpanElement> {\n  ref?: React.Ref<HTMLSpanElement>;\n  src: string;\n  children: React.ReactNode;\n  fallbackColor?: string;\n}\n\nfunction TextGif({\n  ref,\n  src,\n  children,\n  fallbackColor = \"currentColor\",\n  className,\n  style,\n  ...props\n}: TextGifProps) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        \"inline-block bg-clip-text text-transparent\",\n        \"bg-cover bg-center bg-no-repeat\",\n        \"selection:bg-foreground/10\",\n        className,\n      )}\n      style={{\n        ...style,\n        color: fallbackColor,\n        backgroundColor: fallbackColor,\n        backgroundImage: `url(\"${src}\")`,\n        backgroundClip: \"text\",\n        WebkitBackgroundClip: \"text\",\n        WebkitTextFillColor: \"transparent\",\n        backgroundRepeat: \"no-repeat\",\n        backgroundSize: \"cover\",\n        backgroundPosition: \"center\",\n      }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport { TextGif };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}