{
  "name": "evervault-card",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/evervault-card.tsx",
      "content": "\"use client\";\nimport { useMotionValue } from \"motion/react\";\nimport React, { useState, useEffect } from \"react\";\nimport { useMotionTemplate, motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const EvervaultCard = ({\n  text,\n  className,\n}: {\n  text?: string;\n  className?: string;\n}) => {\n  let mouseX = useMotionValue(0);\n  let mouseY = useMotionValue(0);\n\n  const [randomString, setRandomString] = useState(\"\");\n\n  useEffect(() => {\n    let str = generateRandomString(1500);\n    setRandomString(str);\n  }, []);\n\n  function onMouseMove({ currentTarget, clientX, clientY }: any) {\n    let { left, top } = currentTarget.getBoundingClientRect();\n    mouseX.set(clientX - left);\n    mouseY.set(clientY - top);\n\n    const str = generateRandomString(1500);\n    setRandomString(str);\n  }\n\n  return (\n    <div\n      className={cn(\n        \"p-0.5  bg-transparent aspect-square  flex items-center justify-center w-full h-full relative\",\n        className\n      )}\n    >\n      <div\n        onMouseMove={onMouseMove}\n        className=\"group/card rounded-3xl w-full relative overflow-hidden bg-transparent flex items-center justify-center h-full\"\n      >\n        <CardPattern\n          mouseX={mouseX}\n          mouseY={mouseY}\n          randomString={randomString}\n        />\n        <div className=\"relative z-10 flex items-center justify-center\">\n          <div className=\"relative h-44 w-44  rounded-full flex items-center justify-center text-white font-bold text-4xl\">\n            <div className=\"absolute w-full h-full bg-white/[0.8] dark:bg-black/[0.8] blur-sm rounded-full\" />\n            <span className=\"dark:text-white text-black z-20\">{text}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport function CardPattern({ mouseX, mouseY, randomString }: any) {\n  let maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`;\n  let style = { maskImage, WebkitMaskImage: maskImage };\n\n  return (\n    <div className=\"pointer-events-none\">\n      <div className=\"absolute inset-0 rounded-2xl  [mask-image:linear-gradient(white,transparent)] group-hover/card:opacity-50\"></div>\n      <motion.div\n        className=\"absolute inset-0 rounded-2xl bg-gradient-to-r from-green-500 to-blue-700 opacity-0  group-hover/card:opacity-100 backdrop-blur-xl transition duration-500\"\n        style={style}\n      />\n      <motion.div\n        className=\"absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay  group-hover/card:opacity-100\"\n        style={style}\n      >\n        <p className=\"absolute inset-x-0 text-xs h-full break-words whitespace-pre-wrap text-white font-mono font-bold transition duration-500\">\n          {randomString}\n        </p>\n      </motion.div>\n    </div>\n  );\n}\n\nconst characters =\n  \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\nexport const generateRandomString = (length: number) => {\n  let result = \"\";\n  for (let i = 0; i < length; i++) {\n    result += characters.charAt(Math.floor(Math.random() * characters.length));\n  }\n  return result;\n};\n\nexport const Icon = ({ className, ...rest }: any) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"1.5\"\n      stroke=\"currentColor\"\n      className={className}\n      {...rest}\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 6v12m6-6H6\" />\n    </svg>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/evervault-card.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Evervault Card"
}