{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pointer-demo-1",
  "type": "registry:example",
  "title": "Pointer Demo 1",
  "description": "Example showing a pointer effect component",
  "registryDependencies": [
    "@magicui/pointer"
  ],
  "files": [
    {
      "path": "registry/example/pointer-demo-1.tsx",
      "content": "\"use client\"\n\nimport { motion } from \"motion/react\"\n\nimport { Pointer } from \"@/registry/magicui/pointer\"\n\nexport default function PointerDemo1() {\n  return (\n    <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 md:grid-rows-2\">\n      <div className=\"border-border rounded-lg border p-4\">\n        <div className=\"relative flex h-40 flex-col items-center justify-center\">\n          <h3 className=\"text-xl font-semibold\">Animated Pointer</h3>\n          <p className=\"text-muted-foreground text-sm\">Animated pointer</p>\n        </div>\n        <Pointer>\n          <motion.div\n            animate={{\n              scale: [0.8, 1, 0.8],\n              rotate: [0, 5, -5, 0],\n            }}\n            transition={{\n              duration: 1.5,\n              repeat: Infinity,\n              ease: \"easeInOut\",\n            }}\n          >\n            <svg\n              width=\"40\"\n              height=\"40\"\n              viewBox=\"0 0 40 40\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"text-pink-600\"\n            >\n              <motion.path\n                d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\n                fill=\"currentColor\"\n                animate={{ scale: [1, 1.2, 1] }}\n                transition={{\n                  duration: 0.8,\n                  repeat: Infinity,\n                  ease: \"easeInOut\",\n                }}\n              />\n            </svg>\n          </motion.div>\n        </Pointer>\n      </div>\n\n      <div className=\"border-border rounded-lg border p-4\">\n        <div className=\"relative flex h-40 flex-col items-center justify-center\">\n          <h3 className=\"text-xl font-semibold\">Colored Pointer</h3>\n          <p className=\"text-muted-foreground text-sm\">\n            A custom pointer with different color\n          </p>\n        </div>\n        <Pointer className=\"fill-blue-500\" />\n      </div>\n\n      <div className=\"border-border rounded-lg border p-4\">\n        <div className=\"relative flex h-40 flex-col items-center justify-center\">\n          <h3 className=\"text-xl font-semibold\">Custom Shape</h3>\n          <p className=\"text-muted-foreground text-sm\">\n            A pointer with a custom SVG shape\n          </p>\n        </div>\n        <Pointer>\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" className=\"fill-purple-500\" />\n            <circle cx=\"12\" cy=\"12\" r=\"5\" className=\"fill-white\" />\n          </svg>\n        </Pointer>\n      </div>\n\n      <div className=\"border-border rounded-lg border p-4\">\n        <div className=\"relative flex h-40 flex-col items-center justify-center\">\n          <h3 className=\"text-xl font-semibold\">Emoji Pointer</h3>\n          <p className=\"text-muted-foreground text-sm\">\n            Using an emoji as a custom pointer\n          </p>\n        </div>\n        <Pointer>\n          <div className=\"text-2xl\">👆</div>\n        </Pointer>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}