{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "wobble-card",
  "type": "registry:block",
  "title": "Wobble card",
  "description": "Wobble card",
  "files": [
    {
      "path": "components/usages/wobblecardusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport Image from \"next/image\";\n\nimport WobbleCard from \"@/registry/open-source/wobble-card\";\n\nexport default function WobbleCardUsage() {\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<div className=\"grid grid-cols-1 lg:grid-cols-3 gap-4 max-w-7xl mx-auto w-full\">\n\t\t\t\t<WobbleCard\n\t\t\t\t\tcontainerClassName=\"col-span-1 lg:col-span-2 h-full bg-pink-800 min-h-[500px] lg:min-h-[300px]\"\n\t\t\t\t\tclassName=\"\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"max-w-xs\">\n\t\t\t\t\t\t<h2 className=\"text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-secondary\">\n\t\t\t\t\t\t\tGippity AI powers the entire universe\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p className=\"mt-4 text-left  text-base/6 text-secondary\">\n\t\t\t\t\t\t\tWith over 100,000 mothly active bot users, Gippity AI is\n\t\t\t\t\t\t\tthe most popular AI platform for developers.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Image\n\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\twidth={500}\n\t\t\t\t\t\theight={500}\n\t\t\t\t\t\talt=\"linear demo image\"\n\t\t\t\t\t\tclassName=\"absolute -right-4 lg:-right-[40%] grayscale filter -bottom-10 object-contain rounded-2xl\"\n\t\t\t\t\t/>\n\t\t\t\t</WobbleCard>\n\t\t\t\t<WobbleCard containerClassName=\"col-span-1 min-h-[300px]\">\n\t\t\t\t\t<h2 className=\"max-w-80  text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-secondary\">\n\t\t\t\t\t\tNo shirt, no shoes, no weapons.\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"mt-4 max-w-104 text-left  text-base/6 text-secondary\">\n\t\t\t\t\t\tIf someone yells “stop!”, goes limp, or taps out, the fight is\n\t\t\t\t\t\tover.\n\t\t\t\t\t</p>\n\t\t\t\t</WobbleCard>\n\t\t\t\t<WobbleCard containerClassName=\"col-span-1 lg:col-span-3 bg-blue-900 min-h-[500px] lg:min-h-[600px] xl:min-h-[300px]\">\n\t\t\t\t\t<div className=\"max-w-sm\">\n\t\t\t\t\t\t<h2 className=\"max-w-sm md:max-w-lg  text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-secondary\">\n\t\t\t\t\t\t\tSignup for blazing-fast cutting-edge state of the art\n\t\t\t\t\t\t\tGippity AI wrapper today!\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p className=\"mt-4 max-w-104 text-left  text-base/6 text-secondary\">\n\t\t\t\t\t\t\tWith over 100,000 mothly active bot users, Gippity AI is\n\t\t\t\t\t\t\tthe most popular AI platform for developers.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Image\n\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\twidth={500}\n\t\t\t\t\t\theight={500}\n\t\t\t\t\t\talt=\"linear demo image\"\n\t\t\t\t\t\tclassName=\"absolute -right-10 md:-right-[40%] lg:-right-[20%] -bottom-10 object-contain rounded-2xl\"\n\t\t\t\t\t/>\n\t\t\t\t</WobbleCard>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/wobblecardusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport Image from \"next/image\";\n\nimport WobbleCard from \"@/registry/open-source/wobble-card\";\n\nexport default function WobbleCardUsage() {\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<div className=\"grid grid-cols-1 lg:grid-cols-3 gap-4 max-w-7xl mx-auto w-full\">\n\t\t\t\t<WobbleCard\n\t\t\t\t\tcontainerClassName=\"col-span-1 lg:col-span-2 h-full bg-pink-800 min-h-[500px] lg:min-h-[300px]\"\n\t\t\t\t\tclassName=\"\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"max-w-xs\">\n\t\t\t\t\t\t<h2 className=\"text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-secondary\">\n\t\t\t\t\t\t\tGippity AI powers the entire universe\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p className=\"mt-4 text-left  text-base/6 text-secondary\">\n\t\t\t\t\t\t\tWith over 100,000 mothly active bot users, Gippity AI is\n\t\t\t\t\t\t\tthe most popular AI platform for developers.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Image\n\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\twidth={500}\n\t\t\t\t\t\theight={500}\n\t\t\t\t\t\talt=\"linear demo image\"\n\t\t\t\t\t\tclassName=\"absolute -right-4 lg:-right-[40%] grayscale filter -bottom-10 object-contain rounded-2xl\"\n\t\t\t\t\t/>\n\t\t\t\t</WobbleCard>\n\t\t\t\t<WobbleCard containerClassName=\"col-span-1 min-h-[300px]\">\n\t\t\t\t\t<h2 className=\"max-w-80  text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-secondary\">\n\t\t\t\t\t\tNo shirt, no shoes, no weapons.\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"mt-4 max-w-104 text-left  text-base/6 text-secondary\">\n\t\t\t\t\t\tIf someone yells “stop!”, goes limp, or taps out, the fight is\n\t\t\t\t\t\tover.\n\t\t\t\t\t</p>\n\t\t\t\t</WobbleCard>\n\t\t\t\t<WobbleCard containerClassName=\"col-span-1 lg:col-span-3 bg-blue-900 min-h-[500px] lg:min-h-[600px] xl:min-h-[300px]\">\n\t\t\t\t\t<div className=\"max-w-sm\">\n\t\t\t\t\t\t<h2 className=\"max-w-sm md:max-w-lg  text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-secondary\">\n\t\t\t\t\t\t\tSignup for blazing-fast cutting-edge state of the art\n\t\t\t\t\t\t\tGippity AI wrapper today!\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p className=\"mt-4 max-w-104 text-left  text-base/6 text-secondary\">\n\t\t\t\t\t\t\tWith over 100,000 mothly active bot users, Gippity AI is\n\t\t\t\t\t\t\tthe most popular AI platform for developers.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Image\n\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\twidth={500}\n\t\t\t\t\t\theight={500}\n\t\t\t\t\t\talt=\"linear demo image\"\n\t\t\t\t\t\tclassName=\"absolute -right-10 md:-right-[40%] lg:-right-[20%] -bottom-10 object-contain rounded-2xl\"\n\t\t\t\t\t/>\n\t\t\t\t</WobbleCard>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/wobble-card.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion } from \"motion/react\";\n\n// https://ui.aceternity.com/components/wobble-card\n\nconst WobbleCard = ({\n\tchildren,\n\tcontainerClassName,\n\tclassName,\n}: {\n\tchildren: React.ReactNode;\n\tcontainerClassName?: string;\n\tclassName?: string;\n}) => {\n\tconst [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n\tconst [isHovering, setIsHovering] = useState(false);\n\n\tconst handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {\n\t\tconst { clientX, clientY } = event;\n\t\tconst rect = event.currentTarget.getBoundingClientRect();\n\t\tconst x = (clientX - (rect.left + rect.width / 2)) / 20;\n\t\tconst y = (clientY - (rect.top + rect.height / 2)) / 20;\n\t\tsetMousePosition({ x, y });\n\t};\n\treturn (\n\t\t<motion.section\n\t\t\tonMouseMove={handleMouseMove}\n\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsHovering(false);\n\t\t\t\tsetMousePosition({ x: 0, y: 0 });\n\t\t\t}}\n\t\t\tstyle={{\n\t\t\t\ttransform: isHovering\n\t\t\t\t\t? `translate3d(${mousePosition.x}px, ${mousePosition.y}px, 0) scale3d(1, 1, 1)`\n\t\t\t\t\t: \"translate3d(0px, 0px, 0) scale3d(1, 1, 1)\",\n\t\t\t\ttransition: \"transform 0.1s ease-out\",\n\t\t\t}}\n\t\t\tclassName={cn(\n\t\t\t\t\"mx-auto w-full bg-indigo-800  relative rounded-2xl overflow-hidden\",\n\t\t\t\tcontainerClassName\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"relative  h-full bg-[radial-gradient(88%_100%_at_top,rgba(255,255,255,0.5),rgba(255,255,255,0))]  sm:mx-0 sm:rounded-2xl overflow-hidden\"\n\t\t\t\tstyle={{\n\t\t\t\t\tboxShadow:\n\t\t\t\t\t\t\"0 10px 32px rgba(34, 42, 53, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.05), 0 4px 6px rgba(34, 42, 53, 0.08), 0 24px 108px rgba(47, 48, 55, 0.10)\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttransform: isHovering\n\t\t\t\t\t\t\t? `translate3d(${-mousePosition.x}px, ${-mousePosition.y}px, 0) scale3d(1.03, 1.03, 1)`\n\t\t\t\t\t\t\t: \"translate3d(0px, 0px, 0) scale3d(1, 1, 1)\",\n\t\t\t\t\t\ttransition: \"transform 0.1s ease-out\",\n\t\t\t\t\t}}\n\t\t\t\t\tclassName={cn(\"h-full px-4 py-20 sm:px-10\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t</motion.section>\n\t);\n};\n\nexport default WobbleCard;\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"
    }
  ]
}