{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "type": "registry:block",
  "title": "Hover card",
  "description": "Hover card",
  "files": [
    {
      "path": "components/usages/hovercardusage.tsx",
      "content": "import React from \"react\";\n\nimport { EvervaultCard, Icon } from \"@/registry/open-source/hover-card\";\n\nexport default function EvervaultCardDemo() {\n\treturn (\n\t\t<div className=\"border border-black/20 dark:border-white/20 flex flex-col items-start max-w-sm mx-auto p-4 relative h-120\">\n\t\t\t<Icon className=\"absolute h-6 w-6 -top-3 -left-3 dark:text-secondary text-secondary\" />\n\t\t\t<Icon className=\"absolute h-6 w-6 -bottom-3 -left-3 dark:text-secondary text-secondary\" />\n\t\t\t<Icon className=\"absolute h-6 w-6 -top-3 -right-3 dark:text-secondary text-secondary\" />\n\t\t\t<Icon className=\"absolute h-6 w-6 -bottom-3 -right-3 dark:text-secondary text-secondary\" />\n\n\t\t\t<EvervaultCard text=\"hover\" />\n\n\t\t\t<h2 className=\"dark:text-secondary text-secondary mt-4 text-sm font-light\">\n\t\t\t\tHover over this card to reveal an awesome effect. Running out of\n\t\t\t\tcopy here.\n\t\t\t</h2>\n\t\t\t<p className=\"text-sm border font-light dark:border-white/20 border-black/20 rounded-full mt-4 text-secondary dark:text-secondary px-2 py-0.5\">\n\t\t\t\tWatch me hover\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/hovercardusage.tsx",
      "content": "import React from \"react\";\n\nimport { EvervaultCard, Icon } from \"@/registry/open-source/hover-card\";\n\nexport default function EvervaultCardDemo() {\n\treturn (\n\t\t<div className=\"border border-black/20 dark:border-white/20 flex flex-col items-start max-w-sm mx-auto p-4 relative h-120\">\n\t\t\t<Icon className=\"absolute h-6 w-6 -top-3 -left-3 dark:text-secondary text-secondary\" />\n\t\t\t<Icon className=\"absolute h-6 w-6 -bottom-3 -left-3 dark:text-secondary text-secondary\" />\n\t\t\t<Icon className=\"absolute h-6 w-6 -top-3 -right-3 dark:text-secondary text-secondary\" />\n\t\t\t<Icon className=\"absolute h-6 w-6 -bottom-3 -right-3 dark:text-secondary text-secondary\" />\n\n\t\t\t<EvervaultCard text=\"hover\" />\n\n\t\t\t<h2 className=\"dark:text-secondary text-secondary mt-4 text-sm font-light\">\n\t\t\t\tHover over this card to reveal an awesome effect. Running out of\n\t\t\t\tcopy here.\n\t\t\t</h2>\n\t\t\t<p className=\"text-sm border font-light dark:border-white/20 border-black/20 rounded-full mt-4 text-secondary dark:text-secondary px-2 py-0.5\">\n\t\t\t\tWatch me hover\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/hover-card.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, useMotionTemplate, useMotionValue } from \"motion/react\";\n\n// https://ui.aceternity.com/components/evervault-card\n\nexport const EvervaultCard = ({\n\ttext,\n\tclassName,\n}: {\n\ttext?: string;\n\tclassName?: string;\n}) => {\n\tlet mouseX = useMotionValue(0);\n\tlet mouseY = useMotionValue(0);\n\n\tconst [randomString, setRandomString] = useState(\"\");\n\n\tuseEffect(() => {\n\t\tlet str = generateRandomString(1500);\n\t\tsetRandomString(str);\n\t}, []);\n\n\tfunction onMouseMove({ currentTarget, clientX, clientY }: any) {\n\t\tlet { left, top } = currentTarget.getBoundingClientRect();\n\t\tmouseX.set(clientX - left);\n\t\tmouseY.set(clientY - top);\n\n\t\tconst str = generateRandomString(1500);\n\t\tsetRandomString(str);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"p-0.5  bg-transparent aspect-square  flex items-center justify-center w-full h-full relative\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tonMouseMove={onMouseMove}\n\t\t\t\tclassName=\"group/card rounded-3xl w-full relative overflow-hidden bg-transparent flex items-center justify-center h-full\"\n\t\t\t>\n\t\t\t\t<CardPattern\n\t\t\t\t\tmouseX={mouseX}\n\t\t\t\t\tmouseY={mouseY}\n\t\t\t\t\trandomString={randomString}\n\t\t\t\t/>\n\t\t\t\t<div className=\"relative z-10 flex items-center justify-center\">\n\t\t\t\t\t<div className=\"relative h-44 w-44  rounded-full flex items-center justify-center text-foreground font-bold text-4xl\">\n\t\t\t\t\t\t<div className=\"absolute w-full h-full bg-background/80 dark:bg-background/80 blur-xs rounded-full\" />\n\t\t\t\t\t\t<span className=\"dark:text-foreground text-foreground z-20\">\n\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport function CardPattern({ mouseX, mouseY, randomString }: any) {\n\tlet maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`;\n\tlet style = { maskImage, WebkitMaskImage: maskImage };\n\n\treturn (\n\t\t<div className=\"pointer-events-none\">\n\t\t\t<div className=\"absolute inset-0 rounded-2xl  mask-[linear-gradient(white,transparent)] group-hover/card:opacity-50\"></div>\n\t\t\t<motion.div\n\t\t\t\tclassName=\"absolute inset-0 rounded-2xl bg-linear-to-r from-green-500 to-blue-700 opacity-0  group-hover/card:opacity-100 backdrop-blur-xl transition duration-500\"\n\t\t\t\tstyle={style}\n\t\t\t/>\n\t\t\t<motion.div\n\t\t\t\tclassName=\"absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay  group-hover/card:opacity-100\"\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t<p className=\"absolute inset-x-0 text-xs h-full wrap-break-word whitespace-pre-wrap text-foreground font-mono font-bold transition duration-500\">\n\t\t\t\t\t{randomString}\n\t\t\t\t</p>\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n}\n\nconst characters =\n\t\"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\nexport const generateRandomString = (length: number) => {\n\tlet result = \"\";\n\tfor (let i = 0; i < length; i++) {\n\t\tresult += characters.charAt(\n\t\t\tMath.floor(Math.random() * characters.length)\n\t\t);\n\t}\n\treturn result;\n};\n\nexport const Icon = ({ className, ...rest }: any) => {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tclassName={className}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\td=\"M12 6v12m6-6H6\"\n\t\t\t/>\n\t\t</svg>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}