{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gif-text",
  "title": "Gif Text",
  "description": "A stunning text effect that uses a GIF as the fill color.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/gif-text/gif-text.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useEffect, useState } from \"react\";\n\ninterface GifTextProps {\n  /**\n   * The text to display\n   */\n  text?: string;\n  /**\n   * The source URL for the background image/gif\n   */\n  gif?: string;\n  /**\n   * Class for the text element\n   */\n  className?: string;\n  /**\n   * Class for the container (e.g. height, background)\n   */\n  containerClassName?: string;\n}\n\nconst GifText = ({\n  text = \"CHAMAAC\",\n  gif = \"https://assets.amarn.me/gif-text.gif\",\n  className,\n  containerClassName,\n}: GifTextProps) => {\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    if (!gif) return;\n\n    setLoading(true);\n    const img = new Image();\n    img.src = gif;\n    img.onload = () => setLoading(false);\n\n    return () => {\n      img.onload = null;\n    };\n  }, [gif]);\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center p-4 bg-white dark:bg-black\",\n        containerClassName\n      )}\n    >\n      <h2\n        className={cn(\n          \"text-[clamp(80px,12vw,150px)] font-extrabold select-none text-center leading-tight uppercase transition-colors duration-300 \",\n          loading\n            ? \"text-neutral-400 animate-pulse duration-100\"\n            : \"text-transparent bg-clip-text bg-cover bg-center bg-no-repeat\",\n          className\n        )}\n        style={{\n          backgroundImage: loading ? \"none\" : `url(${gif})`,\n          WebkitBackgroundClip: loading ? \"none\" : \"text\",\n          backgroundClip: loading ? \"none\" : \"text\",\n        }}\n      >\n        {text}\n      </h2>\n    </div>\n  );\n};\n\nexport default GifText;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}