{
  "name": "3d-pin",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/3d-pin.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\n\nexport const PinContainer = ({\n  children,\n  title,\n  href,\n  className,\n  containerClassName,\n}: {\n  children: React.ReactNode;\n  title?: string;\n  href?: string;\n  className?: string;\n  containerClassName?: string;\n}) => {\n  const [transform, setTransform] = useState(\n    \"translate(-50%,-50%) rotateX(0deg)\"\n  );\n\n  const onMouseEnter = () => {\n    setTransform(\"translate(-50%,-50%) rotateX(40deg) scale(0.8)\");\n  };\n  const onMouseLeave = () => {\n    setTransform(\"translate(-50%,-50%) rotateX(0deg) scale(1)\");\n  };\n\n  return (\n    <a\n      className={cn(\n        \"relative group/pin z-50  cursor-pointer\",\n        containerClassName\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      href={href || \"/\"}\n    >\n      <div\n        style={{\n          perspective: \"1000px\",\n          transform: \"rotateX(70deg) translateZ(0deg)\",\n        }}\n        className=\"absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2\"\n      >\n        <div\n          style={{\n            transform: transform,\n          }}\n          className=\"absolute left-1/2 p-4 top-1/2  flex justify-start items-start  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-black border border-white/[0.1] group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden\"\n        >\n          <div className={cn(\" relative z-50 \", className)}>{children}</div>\n        </div>\n      </div>\n      <PinPerspective title={title} href={href} />\n    </a>\n  );\n};\n\nexport const PinPerspective = ({\n  title,\n  href,\n}: {\n  title?: string;\n  href?: string;\n}) => {\n  return (\n    <motion.div className=\"pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500\">\n      <div className=\" w-full h-full -mt-7 flex-none  inset-0\">\n        <div className=\"absolute top-0 inset-x-0  flex justify-center\">\n          <a\n            href={href}\n            target={\"_blank\"}\n            className=\"relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 \"\n          >\n            <span className=\"relative z-20 text-white text-xs font-bold inline-block py-0.5\">\n              {title}\n            </span>\n\n            <span className=\"absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40\"></span>\n          </a>\n        </div>\n\n        <div\n          style={{\n            perspective: \"1000px\",\n            transform: \"rotateX(70deg) translateZ(0)\",\n          }}\n          className=\"absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2\"\n        >\n          <>\n            <motion.div\n              initial={{\n                opacity: 0,\n                scale: 0,\n                x: \"-50%\",\n                y: \"-50%\",\n              }}\n              animate={{\n                opacity: [0, 1, 0.5, 0],\n                scale: 1,\n\n                z: 0,\n              }}\n              transition={{\n                duration: 6,\n                repeat: Infinity,\n                delay: 0,\n              }}\n              className=\"absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]\"\n            ></motion.div>\n            <motion.div\n              initial={{\n                opacity: 0,\n                scale: 0,\n                x: \"-50%\",\n                y: \"-50%\",\n              }}\n              animate={{\n                opacity: [0, 1, 0.5, 0],\n                scale: 1,\n\n                z: 0,\n              }}\n              transition={{\n                duration: 6,\n                repeat: Infinity,\n                delay: 2,\n              }}\n              className=\"absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]\"\n            ></motion.div>\n            <motion.div\n              initial={{\n                opacity: 0,\n                scale: 0,\n                x: \"-50%\",\n                y: \"-50%\",\n              }}\n              animate={{\n                opacity: [0, 1, 0.5, 0],\n                scale: 1,\n\n                z: 0,\n              }}\n              transition={{\n                duration: 6,\n                repeat: Infinity,\n                delay: 4,\n              }}\n              className=\"absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]\"\n            ></motion.div>\n          </>\n        </div>\n\n        <>\n          <motion.div className=\"absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]\" />\n          <motion.div className=\"absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  \" />\n          <motion.div className=\"absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]\" />\n          <motion.div className=\"absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 \" />\n        </>\n      </div>\n    </motion.div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/3d-pin.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "3d Pin"
}