{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-card",
  "type": "registry:block",
  "title": "3d card",
  "description": "3d card",
  "files": [
    {
      "path": "components/usages/3dcardusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport {\n\tCardBody,\n\tCardContainer,\n\tCardItem,\n} from \"@/registry/open-source/3d-card\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<CardContainer className=\"inter-var\">\n\t\t\t\t<CardBody className=\"bg-background relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/10 dark:bg-background dark:border-white/20 border-black/10 w-auto sm:w-120 h-auto rounded-xl p-6 border  \">\n\t\t\t\t\t<CardItem\n\t\t\t\t\t\ttranslateZ=\"50\"\n\t\t\t\t\t\tclassName=\"text-xl font-bold text-secondary dark:text-secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\tMake things float in air\n\t\t\t\t\t</CardItem>\n\t\t\t\t\t<CardItem\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\ttranslateZ=\"60\"\n\t\t\t\t\t\tclassName=\"text-secondary text-sm max-w-sm mt-2 dark:text-secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\tHover over this card to unleash the power of CSS perspective\n\t\t\t\t\t</CardItem>\n\t\t\t\t\t<CardItem translateZ=\"100\" className=\"w-full mt-4\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\theight=\"1000\"\n\t\t\t\t\t\t\twidth=\"1000\"\n\t\t\t\t\t\t\tclassName=\"h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl\"\n\t\t\t\t\t\t\talt=\"thumbnail\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardItem>\n\t\t\t\t\t<div className=\"flex justify-between items-center mt-20\">\n\t\t\t\t\t\t<CardItem\n\t\t\t\t\t\t\ttranslateZ={20}\n\t\t\t\t\t\t\tas=\"a\"\n\t\t\t\t\t\t\thref=\"https://twitter.com/mannupaaji\"\n\t\t\t\t\t\t\ttarget=\"__blank\"\n\t\t\t\t\t\t\tclassName=\"px-4 py-2 rounded-xl text-xs font-normal dark:text-secondary\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tTry now →\n\t\t\t\t\t\t</CardItem>\n\t\t\t\t\t\t<CardItem\n\t\t\t\t\t\t\ttranslateZ={20}\n\t\t\t\t\t\t\tas=\"button\"\n\t\t\t\t\t\t\tclassName=\"px-4 py-2 rounded-xl bg-background dark:bg-background dark:text-secondary text-secondary text-xs font-bold\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tSign up\n\t\t\t\t\t\t</CardItem>\n\t\t\t\t\t</div>\n\t\t\t\t</CardBody>\n\t\t\t</CardContainer>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/3dcardusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport {\n\tCardBody,\n\tCardContainer,\n\tCardItem,\n} from \"@/registry/open-source/3d-card\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<CardContainer className=\"inter-var\">\n\t\t\t\t<CardBody className=\"bg-background relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/10 dark:bg-background dark:border-white/20 border-black/10 w-auto sm:w-120 h-auto rounded-xl p-6 border  \">\n\t\t\t\t\t<CardItem\n\t\t\t\t\t\ttranslateZ=\"50\"\n\t\t\t\t\t\tclassName=\"text-xl font-bold text-secondary dark:text-secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\tMake things float in air\n\t\t\t\t\t</CardItem>\n\t\t\t\t\t<CardItem\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\ttranslateZ=\"60\"\n\t\t\t\t\t\tclassName=\"text-secondary text-sm max-w-sm mt-2 dark:text-secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\tHover over this card to unleash the power of CSS perspective\n\t\t\t\t\t</CardItem>\n\t\t\t\t\t<CardItem translateZ=\"100\" className=\"w-full mt-4\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\theight=\"1000\"\n\t\t\t\t\t\t\twidth=\"1000\"\n\t\t\t\t\t\t\tclassName=\"h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl\"\n\t\t\t\t\t\t\talt=\"thumbnail\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardItem>\n\t\t\t\t\t<div className=\"flex justify-between items-center mt-20\">\n\t\t\t\t\t\t<CardItem\n\t\t\t\t\t\t\ttranslateZ={20}\n\t\t\t\t\t\t\tas=\"a\"\n\t\t\t\t\t\t\thref=\"https://twitter.com/mannupaaji\"\n\t\t\t\t\t\t\ttarget=\"__blank\"\n\t\t\t\t\t\t\tclassName=\"px-4 py-2 rounded-xl text-xs font-normal dark:text-secondary\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tTry now →\n\t\t\t\t\t\t</CardItem>\n\t\t\t\t\t\t<CardItem\n\t\t\t\t\t\t\ttranslateZ={20}\n\t\t\t\t\t\t\tas=\"button\"\n\t\t\t\t\t\t\tclassName=\"px-4 py-2 rounded-xl bg-background dark:bg-background dark:text-secondary text-secondary text-xs font-bold\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tSign up\n\t\t\t\t\t\t</CardItem>\n\t\t\t\t\t</div>\n\t\t\t\t</CardBody>\n\t\t\t</CardContainer>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/3d-card.tsx",
      "content": "\"use client\";\n\nimport React, {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\n// https://ui.aceternity.com/components/3d-card-effect\n\nconst MouseEnterContext = createContext<\n\t[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined\n>(undefined);\n\nexport const CardContainer = ({\n\tchildren,\n\tclassName,\n\tcontainerClassName,\n\tid,\n\ttitle,\n}: {\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tcontainerClassName?: string;\n\tid?: string;\n\ttitle?: string;\n}) => {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [isMouseEntered, setIsMouseEntered] = useState(false);\n\n\tconst handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (!containerRef.current) return;\n\t\tconst { left, top, width, height } =\n\t\t\tcontainerRef.current.getBoundingClientRect();\n\t\tconst x = (e.clientX - left - width / 2) / 25;\n\t\tconst y = (e.clientY - top - height / 2) / 25;\n\t\tcontainerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n\t};\n\n\tconst handleMouseEnter = () => {\n\t\tsetIsMouseEntered(true);\n\t\tif (!containerRef.current) return;\n\t};\n\n\tconst handleMouseLeave = () => {\n\t\tif (!containerRef.current) return;\n\t\tsetIsMouseEntered(false);\n\t\tcontainerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;\n\t};\n\treturn (\n\t\t<MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pt-20 flex items-center justify-center\",\n\t\t\t\t\tcontainerClassName\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tperspective: \"1000px\",\n\t\t\t\t}}\n\t\t\t\tid={id}\n\t\t\t\ttitle={title}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={containerRef}\n\t\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\t\tonMouseMove={handleMouseMove}\n\t\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex items-center justify-center relative transition-transform duration-200 ease-linear\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</MouseEnterContext.Provider>\n\t);\n};\n\nexport const CardBody = ({\n\tchildren,\n\tclassName,\n}: {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"transform-3d  *:transform-3d\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport const CardItem = ({\n\tas: Tag = \"div\",\n\tchildren,\n\tclassName,\n\ttranslateX = 0,\n\ttranslateY = 0,\n\ttranslateZ = 0,\n\trotateX = 0,\n\trotateY = 0,\n\trotateZ = 0,\n\t...rest\n}: {\n\tas?: React.ElementType;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\ttranslateX?: number | string;\n\ttranslateY?: number | string;\n\ttranslateZ?: number | string;\n\trotateX?: number | string;\n\trotateY?: number | string;\n\trotateZ?: number | string;\n\t[key: string]: any;\n}) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isMouseEntered] = useMouseEnter();\n\n\tuseEffect(() => {\n\t\thandleAnimations();\n\t}, [isMouseEntered]);\n\n\tconst handleAnimations = () => {\n\t\tif (!ref.current) return;\n\t\tif (isMouseEntered) {\n\t\t\tref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;\n\t\t} else {\n\t\t\tref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;\n\t\t}\n\t};\n\n\treturn (\n\t\t<Tag\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"transition duration-200 ease-linear\", className)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Tag>\n\t);\n};\n\n// Create a hook to use the context\nexport const useMouseEnter = () => {\n\tconst context = useContext(MouseEnterContext);\n\tif (context === undefined) {\n\t\tthrow new Error(\"useMouseEnter must be used within a MouseEnterProvider\");\n\t}\n\treturn context;\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"
    }
  ]
}