{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "perspective-grid",
  "title": "Perspective Grid",
  "description": "A 3D-perspective grid that tilts on hover.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/components/perspective-grid/perspective-grid.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, type Variants } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Chain {\n  id: number;\n  name: string;\n  symbol: string;\n  logo?: string;\n}\n\nconst defaultChains: Chain[] = [\n  { id: 1, name: \"Bitcoin\", symbol: \"BTC\", logo: \"/assets/chains/bitcoin.png\" },\n  {\n    id: 2,\n    name: \"Ethereum\",\n    symbol: \"ETH\",\n    logo: \"/assets/chains/ethereum.png\",\n  },\n  { id: 3, name: \"BNB Chain\", symbol: \"BNB\", logo: \"/assets/chains/bnb.png\" },\n  { id: 4, name: \"Solana\", symbol: \"SOL\", logo: \"/assets/chains/solana.png\" },\n  { id: 5, name: \"Polygon\", symbol: \"POL\", logo: \"/assets/chains/polygon.png\" },\n  {\n    id: 6,\n    name: \"Avalanche\",\n    symbol: \"AVAX\",\n    logo: \"/assets/chains/avalanche.png\",\n  },\n  {\n    id: 7,\n    name: \"Arbitrum\",\n    symbol: \"ARB\",\n    logo: \"/assets/chains/arbitrum.png\",\n  },\n  {\n    id: 8,\n    name: \"Optimism\",\n    symbol: \"OP\",\n    logo: \"/assets/chains/optimism.png\",\n  },\n  { id: 9, name: \"Base\", symbol: \"BASE\", logo: \"/assets/chains/base.png\" },\n  { id: 10, name: \"Sui\", symbol: \"SUI\", logo: \"/assets/chains/sui.png\" },\n  { id: 11, name: \"Aptos\", symbol: \"APT\", logo: \"/assets/chains/aptos.png\" },\n  { id: 12, name: \"Cosmos\", symbol: \"ATOM\", logo: \"/assets/chains/cosmos.png\" },\n  {\n    id: 13,\n    name: \"Polkadot\",\n    symbol: \"DOT\",\n    logo: \"/assets/chains/polkadot.png\",\n  },\n  {\n    id: 14,\n    name: \"Near Protocol\",\n    symbol: \"NEAR\",\n    logo: \"/assets/chains/near.png\",\n  },\n  { id: 15, name: \"Tron\", symbol: \"TRX\", logo: \"/assets/chains/tron.png\" },\n  {\n    id: 16,\n    name: \"Filecoin\",\n    symbol: \"FIL\",\n    logo: \"/assets/chains/filecoin.png\",\n  },\n  {\n    id: 17,\n    name: \"Celestia\",\n    symbol: \"TIA\",\n    logo: \"/assets/chains/celestia.png\",\n  },\n  {\n    id: 18,\n    name: \"Injective\",\n    symbol: \"INJ\",\n    logo: \"/assets/chains/injective.png\",\n  },\n  {\n    id: 19,\n    name: \"Cardano\",\n    symbol: \"ADA\",\n    logo: \"/assets/chains/cardano.png\",\n  },\n  {\n    id: 20,\n    name: \"Toncoin\",\n    symbol: \"TON\",\n    logo: \"/assets/chains/toncoin.png\",\n  },\n  {\n    id: 21,\n    name: \"Starknet\",\n    symbol: \"STRK\",\n    logo: \"/assets/chains/starknet.png\",\n  },\n  { id: 22, name: \"zkSync\", symbol: \"ZK\", logo: \"/assets/chains/zksync.png\" },\n  {\n    id: 23,\n    name: \"Internet Computer\",\n    symbol: \"ICP\",\n    logo: \"/assets/chains/icp.png\",\n  },\n  { id: 24, name: \"Sei\", symbol: \"SEI\", logo: \"/assets/chains/sei.png\" },\n];\n\nconst chainColors: Record<string, string> = {\n  BTC: \"#f7931a\",\n  ETH: \"#627eea\",\n  BNB: \"#f0b90b\",\n  SOL: \"#9945ff\",\n  POL: \"#8247e5\",\n  AVAX: \"#e84142\",\n  ARB: \"#2d374b\",\n  OP: \"#ff0420\",\n  BASE: \"#0052ff\",\n  SUI: \"#4da2ff\",\n  APT: \"#00bfa5\",\n  ATOM: \"#2e3148\",\n  DOT: \"#e6007a\",\n  NEAR: \"#000000\",\n  TRX: \"#ef0027\",\n  FIL: \"#0090ff\",\n  TIA: \"#7b2fe9\",\n  INJ: \"#00f2fe\",\n  ADA: \"#0033ad\",\n  TON: \"#0098ea\",\n  STRK: \"#08a4d4\",\n  ZK: \"#4c8eff\",\n  ICP: \"#3b00b9\",\n  SEI: \"#8c1c40\",\n};\n\nconst containerVariants: Variants = {\n  hidden: {},\n  visible: {\n    transition: { staggerChildren: 0.04 },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 24, scale: 0.9 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: { type: \"spring\", stiffness: 300, damping: 24 },\n  },\n};\n\nfunction ChainCard({ chain, variants }: { chain: Chain; variants?: Variants }) {\n  const [imgFailed, setImgFailed] = useState(false);\n\n  return (\n    <motion.div\n      variants={variants}\n      whileHover={{ y: -7, scale: 1.02 }}\n      transition={{ type: \"spring\", stiffness: 400, damping: 10 }}\n      className=\"group relative mx-auto h-16 w-16 cursor-pointer md:h-28 md:w-28\"\n    >\n      <div\n        className=\"pointer-events-none absolute inset-x-0 z-10 mx-auto rounded-full bg-[radial-gradient(rgba(0,0,0,0.5)_0%,rgba(0,0,0,0.2)_60%,transparent_80%)] opacity-30 blur-[1px] transition-all duration-300 group-hover:scale-x-110 group-hover:scale-y-150 group-hover:opacity-70 group-hover:blur-[3px] dark:bg-[radial-gradient(rgba(180,180,200,0.25)_0%,rgba(180,180,200,0.08)_60%,transparent_80%)]\"\n        style={{\n          bottom: \"0\",\n          width: \"80%\",\n          height: \"10%\",\n          transform: \"translateY(60%)\",\n        }}\n      />\n\n      <div className=\"absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-[1.25rem] border-[0.5px] border-[#f9f6f6] bg-white transition-colors duration-300 dark:border-[#1a1a1f] dark:bg-[#0c0c0e] hover:border-[#f2efef] dark:hover:border-[#2b2b36]\">\n        {chain.logo && !imgFailed ? (\n          // eslint-disable-next-line @next/next/no-img-element\n          <img\n            src={chain.logo}\n            alt={chain.name}\n            loading=\"lazy\"\n            className=\"h-[88%] w-[88%] object-contain\"\n            onError={() => setImgFailed(true)}\n          />\n        ) : (\n          <div\n            className=\"flex h-full w-full items-center justify-center rounded-[1.25rem] text-[10px] font-bold text-white md:text-sm\"\n            style={{ backgroundColor: chainColors[chain.symbol] || \"#666\" }}\n          >\n            {chain.symbol}\n          </div>\n        )}\n      </div>\n    </motion.div>\n  );\n}\n\nexport interface PerspectiveGridProps {\n  chains?: Chain[];\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  className?: string;\n  gridClassName?: string;\n}\n\nexport default function PerspectiveGrid({\n  chains = defaultChains,\n  title = \"Any transaction on any chain,<br />Aside executes it for you.\",\n  subtitle = \"Multi-chain ecosystem\",\n  className,\n  gridClassName,\n}: PerspectiveGridProps) {\n  return (\n    <motion.div\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={{ once: true, margin: \"-50px\" }}\n      variants={containerVariants}\n      className={cn(\"relative w-full overflow-hidden py-6\", className)}\n    >\n      <div className=\"flex w-full flex-col items-center justify-center px-4 md:px-6\">\n        <motion.div\n          variants={itemVariants}\n          className=\"z-10 flex flex-col items-center px-4 text-center\"\n        >\n          <p className=\"cursor-pointer text-sm font-medium text-primary md:text-[17px]\">\n            {subtitle} &gt;\n          </p>\n          <h1 className=\"text-2xl font-medium leading-[1.1] tracking-tight md:text-[2.5rem]\">\n            {typeof title === \"string\"\n              ? title.split(\"<br />\").map((part, i) => (\n                <React.Fragment key={i}>\n                  {i > 0 && <br />}\n                  {part}\n                </React.Fragment>\n              ))\n              : title}\n          </h1>\n        </motion.div>\n\n        <div\n          style={{ perspective: \"1000px\" }}\n          className=\"w-full max-w-5xl px-4  md:px-8\"\n        >\n          <motion.div\n            style={{ rotateX: 45 }}\n            variants={containerVariants}\n            className={cn(\n              \"mx-auto grid w-full grid-cols-4 gap-x-4 gap-y-6 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 lg:gap-x-3 lg:gap-y-6\",\n              gridClassName,\n            )}\n          >\n            {chains.map((chain) => (\n              <ChainCard key={chain.id} chain={chain} variants={itemVariants} />\n            ))}\n          </motion.div>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n"
    }
  ],
  "type": "registry:component"
}