Feature (Components): New Pointer component

__registry__/index.tsx

@@ -201,6 +201,30 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  pointer: {
+    name: "pointer",
+    description:
+      "A component that displays a pointer when hovering over an element",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [
+      {
+        path: "registry/magicui/pointer.tsx",
+        type: "registry:ui",
+        target: "components/magicui/pointer.tsx",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/magicui/pointer.tsx");
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object",
+        ) || item.name;
+      return { default: mod.default || mod[exportName] };
+    }),
+    meta: undefined,
+  },
   "neon-gradient-card": {
     name: "neon-gradient-card",
     description: "A beautiful neon card effect",
@@ -1839,6 +1863,29 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  "pointer-demo-1": {
+    name: "pointer-demo-1",
+    description: "Example showing a pointer effect component",
+    type: "registry:example",
+    registryDependencies: ["https://magicui.design/r/pointer"],
+    files: [
+      {
+        path: "registry/example/pointer-demo-1.tsx",
+        type: "registry:example",
+        target: "components/pointer-demo-1.tsx",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/example/pointer-demo-1.tsx");
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object",
+        ) || item.name;
+      return { default: mod.default || mod[exportName] };
+    }),
+    meta: undefined,
+  },
   "neon-gradient-card-demo": {
     name: "neon-gradient-card-demo",
     description: "Example showing a beautiful neon card effect.",

config/docs.ts

@@ -225,6 +225,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "New",
         },
+        {
+          title: "Pointer",
+          href: `/docs/components/pointer`,
+          items: [],
+          label: "New",
+        },
       ],
     },
     {

content/docs/components/pointer.mdx

@@ -0,0 +1,46 @@
+---
+title: Pointer
+date: 2025-02-17
+description: A component that displays a pointer when hovering over an element
+author: h3rmel
+published: true
+---
+
+<ComponentPreview name="pointer-demo-1" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add "https://magicui.design/r/pointer"
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="pointer" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+## Props
+
+| Property    | Type              | Default | Description                                     |
+| ----------- | ----------------- | ------- | ----------------------------------------------- |
+| `children`  | `React.ReactNode` | -       | The content that will be wrapped by the pointer |
+| `className` | `string`          | -       | The className of the pointer                    |

public/r/pointer-demo-1.json

@@ -0,0 +1,18 @@
+{
+  "$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": [
+    "https://magicui.design/r/pointer"
+  ],
+  "files": [
+    {
+      "path": "registry/example/pointer-demo-1.tsx",
+      "content": "\"use client\";\n\nimport { PointerWrapper } from \"@/components/magicui/pointer\";\n\nexport default function PointerDemo1() {\n  return (\n    <PointerWrapper>\n      <div className=\"relative flex size-[500px] items-center justify-center overflow-hidden rounded-lg border bg-background\">\n        <span className=\"pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10\">\n          Pointer\n        </span>\n      </div>\n    </PointerWrapper>\n  );\n}\n",
+      "type": "registry:example",
+      "target": "components/pointer-demo-1.tsx"
+    }
+  ]
+}

public/r/pointer.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pointer",
+  "type": "registry:ui",
+  "title": "Pointer",
+  "description": "A component that displays a pointer when hovering over an element",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "registry/magicui/pointer.tsx",
+      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useMotionValue } from \"motion/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\n/**\n * @property {React.ReactNode} children - The child elements to be wrapped\n */\ninterface PointerWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\n/**\n * A component that wraps content and adds a custom pointer animation when hovering\n * over the wrapped area. The pointer follows the mouse movement within the wrapped area.\n *\n * @component\n * @param {PointerWrapperProps} props - The component props\n */\nexport function PointerWrapper({\n  children,\n  className,\n  ...props\n}: PointerWrapperProps) {\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const ref = useRef<HTMLDivElement>(null);\n  const [rect, setRect] = useState<DOMRect | null>(null);\n  const [isInside, setIsInside] = useState<boolean>(false);\n\n  useEffect(() => {\n    function updateRect() {\n      if (ref.current) {\n        setRect(ref.current.getBoundingClientRect());\n      }\n    }\n\n    // Initial rect calculation\n    updateRect();\n\n    // Update rect on window resize\n    window.addEventListener(\"resize\", updateRect);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateRect);\n    };\n  }, []);\n\n  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {\n    if (rect) {\n      x.set(e.clientX - rect.left);\n      y.set(e.clientY - rect.top);\n    }\n  }\n\n  function handleMouseLeave() {\n    setIsInside(false);\n  }\n\n  function handleMouseEnter() {\n    if (ref.current) {\n      setRect(ref.current.getBoundingClientRect());\n      setIsInside(true);\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"relative cursor-none\", className)}\n      onMouseLeave={handleMouseLeave}\n      onMouseEnter={handleMouseEnter}\n      onMouseMove={handleMouseMove}\n      {...props}\n    >\n      <AnimatePresence>{isInside && <Pointer x={x} y={y} />}</AnimatePresence>\n      {children}\n    </div>\n  );\n}\n\n/**\n * @property {MotionValue<number>} x - The x-coordinate position of the pointer\n * @property {MotionValue<number>} y - The y-coordinate position of the pointer\n */\ninterface PointerProps {\n  x: any;\n  y: any;\n}\n\n/**\n * A custom pointer component that displays an animated arrow cursor\n *\n * @description Used internally by PointerWrapper to show the custom cursor\n *\n * @component\n * @param {PointerProps} props - The component props\n */\nfunction Pointer({ x, y }: PointerProps): JSX.Element {\n  return (\n    <motion.div\n      className=\"pointer-events-none absolute z-50 h-4 w-4 rounded-full\"\n      style={{\n        top: y,\n        left: x,\n      }}\n      initial={{\n        scale: 1,\n        opacity: 1,\n      }}\n      animate={{\n        scale: 1,\n        opacity: 1,\n      }}\n      exit={{\n        scale: 0,\n        opacity: 0,\n      }}\n    >\n      <svg\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n        strokeWidth=\"1\"\n        viewBox=\"0 0 16 16\"\n        className=\"h-6 w-6 translate-x-[-12px] translate-y-[-10px] rotate-[-70deg] stroke-white text-black\"\n        height=\"1em\"\n        width=\"1em\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z\"></path>\n      </svg>\n    </motion.div>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/magicui/pointer.tsx"
+    }
+  ]
+}