{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-hover",
  "type": "registry:block",
  "title": "Card hover",
  "description": "Card hover",
  "files": [
    {
      "path": "components/usages/cardhoverusage.tsx",
      "content": "import { HoverEffect } from \"@/registry/open-source/card-hover\";\n\nexport default function CardHoverEffectDemo() {\n\treturn (\n\t\t<div className=\"max-w-5xl mx-auto px-8\">\n\t\t\t<HoverEffect items={projects} />\n\t\t</div>\n\t);\n}\nconst projects = [\n\t{\n\t\ttitle: \"Stripe\",\n\t\tdescription:\n\t\t\t\"A technology company that builds economic infrastructure for the internet.\",\n\t\tlink: \"https://stripe.com\",\n\t},\n\t{\n\t\ttitle: \"Netflix\",\n\t\tdescription:\n\t\t\t\"A streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.\",\n\t\tlink: \"https://netflix.com\",\n\t},\n\t{\n\t\ttitle: \"Google\",\n\t\tdescription:\n\t\t\t\"A multinational technology company that specializes in Internet-related services and products.\",\n\t\tlink: \"https://google.com\",\n\t},\n\t{\n\t\ttitle: \"Meta\",\n\t\tdescription:\n\t\t\t\"A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.\",\n\t\tlink: \"https://meta.com\",\n\t},\n\t{\n\t\ttitle: \"Amazon\",\n\t\tdescription:\n\t\t\t\"A multinational technology company focusing on e-commerce, cloud computing, digital streaming, and artificial intelligence.\",\n\t\tlink: \"https://amazon.com\",\n\t},\n\t{\n\t\ttitle: \"Microsoft\",\n\t\tdescription:\n\t\t\t\"A multinational technology company that develops, manufactures, licenses, supports, and sells computer software, consumer electronics, personal computers, and related services.\",\n\t\tlink: \"https://microsoft.com\",\n\t},\n];\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/cardhoverusage.tsx",
      "content": "import { HoverEffect } from \"@/registry/open-source/card-hover\";\n\nexport default function CardHoverEffectDemo() {\n\treturn (\n\t\t<div className=\"max-w-5xl mx-auto px-8\">\n\t\t\t<HoverEffect items={projects} />\n\t\t</div>\n\t);\n}\nconst projects = [\n\t{\n\t\ttitle: \"Stripe\",\n\t\tdescription:\n\t\t\t\"A technology company that builds economic infrastructure for the internet.\",\n\t\tlink: \"https://stripe.com\",\n\t},\n\t{\n\t\ttitle: \"Netflix\",\n\t\tdescription:\n\t\t\t\"A streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.\",\n\t\tlink: \"https://netflix.com\",\n\t},\n\t{\n\t\ttitle: \"Google\",\n\t\tdescription:\n\t\t\t\"A multinational technology company that specializes in Internet-related services and products.\",\n\t\tlink: \"https://google.com\",\n\t},\n\t{\n\t\ttitle: \"Meta\",\n\t\tdescription:\n\t\t\t\"A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.\",\n\t\tlink: \"https://meta.com\",\n\t},\n\t{\n\t\ttitle: \"Amazon\",\n\t\tdescription:\n\t\t\t\"A multinational technology company focusing on e-commerce, cloud computing, digital streaming, and artificial intelligence.\",\n\t\tlink: \"https://amazon.com\",\n\t},\n\t{\n\t\ttitle: \"Microsoft\",\n\t\tdescription:\n\t\t\t\"A multinational technology company that develops, manufactures, licenses, supports, and sells computer software, consumer electronics, personal computers, and related services.\",\n\t\tlink: \"https://microsoft.com\",\n\t},\n];\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/card-hover.tsx",
      "content": "import React, { useState } from \"react\";\n\nimport Link from \"next/link\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\n// https://ui.aceternity.com/components/card-hover-effect\n\nexport const HoverEffect = ({\n\titems,\n\tclassName,\n}: {\n\titems: {\n\t\ttitle: string;\n\t\tdescription: string;\n\t\tlink: string;\n\t}[];\n\tclassName?: string;\n}) => {\n\tlet [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3  py-10\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{items.map((item, idx) => (\n\t\t\t\t<Link\n\t\t\t\t\thref={item?.link || \"\"}\n\t\t\t\t\tkey={item?.link}\n\t\t\t\t\tclassName=\"relative group  block p-2 h-full w-full\"\n\t\t\t\t\tonMouseEnter={() => setHoveredIndex(idx)}\n\t\t\t\t\tonMouseLeave={() => setHoveredIndex(null)}\n\t\t\t\t>\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{hoveredIndex === idx && (\n\t\t\t\t\t\t\t<motion.span\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 h-full w-full bg-background dark:bg-slate-800/80 block  rounded-3xl\"\n\t\t\t\t\t\t\t\tlayoutId=\"hoverBackground\"\n\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\ttransition: { duration: 0.15 },\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\ttransition: { duration: 0.15, delay: 0.2 },\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardTitle>{item.title}</CardTitle>\n\t\t\t\t\t\t<CardDescription>{item.description}</CardDescription>\n\t\t\t\t\t</Card>\n\t\t\t\t</Link>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport const Card = ({\n\tclassName,\n\tchildren,\n}: {\n\tclassName?: string;\n\tchildren: React.ReactNode;\n}) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-2xl h-full w-full p-4 overflow-hidden bg-background border border-transparent dark:border-white/20 group-hover:border-slate-700 relative z-20\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"relative z-40\">\n\t\t\t\t<div className=\"p-4\">{children}</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\nexport const CardTitle = ({\n\tclassName,\n\tchildren,\n}: {\n\tclassName?: string;\n\tchildren: React.ReactNode;\n}) => {\n\treturn (\n\t\t<h4\n\t\t\tclassName={cn(\"text-foreground font-bold tracking-wide mt-4\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</h4>\n\t);\n};\nexport const CardDescription = ({\n\tclassName,\n\tchildren,\n}: {\n\tclassName?: string;\n\tchildren: React.ReactNode;\n}) => {\n\treturn (\n\t\t<p\n\t\t\tclassName={cn(\n\t\t\t\t\"mt-8 text-foreground tracking-wide leading-relaxed text-sm\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</p>\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"
    }
  ]
}