diff --git a/__registry__/index.tsx b/__registry__/index.tsx
index 4002a371c..9aa066096 100644
--- a/__registry__/index.tsx
+++ b/__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.",
diff --git a/config/docs.ts b/config/docs.ts
index 787e2ceb7..edf31e66d 100644
--- a/config/docs.ts
+++ b/config/docs.ts
@@ -225,6 +225,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "New",
         },
+        {
+          title: "Pointer",
+          href: `/docs/components/pointer`,
+          items: [],
+          label: "New",
+        },
       ],
     },
     {
diff --git a/content/docs/components/pointer.mdx b/content/docs/components/pointer.mdx
new file mode 100644
index 000000000..d863fa2e6
--- /dev/null
+++ b/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                    |
diff --git a/public/r/pointer-demo-1.json b/public/r/pointer-demo-1.json
new file mode 100644
index 000000000..d4238e7c5
--- /dev/null
+++ b/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"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/r/pointer.json b/public/r/pointer.json
new file mode 100644
index 000000000..a5adc2cde
--- /dev/null
+++ b/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"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index 3179a9f98..84eacfbe0 100644
--- a/registry.json
+++ b/registry.json
@@ -10,11 +10,15 @@
         "class-variance-authority",
         "lucide-react"
       ],
-      "registryDependencies": ["utils"],
+      "registryDependencies": [
+        "utils"
+      ],
       "files": [],
       "tailwind": {
         "config": {
-          "plugins": ["require(\"tailwindcss-animate\")"]
+          "plugins": [
+            "require(\"tailwindcss-animate\")"
+          ]
         }
       },
       "cssVars": {}
@@ -24,7 +28,9 @@
       "type": "registry:ui",
       "title": "Magic Card",
       "description": "A spotlight effect that follows your mouse cursor and highlights borders on hover.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/magic-card.tsx",
@@ -51,7 +57,9 @@
       "type": "registry:ui",
       "title": "Warp Background",
       "description": "A card with a time warping background effect.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/warp-background.tsx",
@@ -65,7 +73,9 @@
       "type": "registry:ui",
       "title": "Line Shadow Text",
       "description": "A text component with a moving line shadow.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/line-shadow-text.tsx",
@@ -79,7 +89,9 @@
       "type": "registry:ui",
       "title": "Aurora Text",
       "description": "A beautiful aurora text effect",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/aurora-text.tsx",
@@ -209,7 +221,9 @@
       "type": "registry:ui",
       "title": "Scroll Progress",
       "description": "Animated Scroll Progress for your pages",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/scroll-progress.tsx",
@@ -223,7 +237,9 @@
       "type": "registry:ui",
       "title": "Lens",
       "description": "A interactive component that enables zooming into images, videos and other elements.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/lens.tsx",
@@ -232,6 +248,22 @@
         }
       ]
     },
+    {
+      "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",
+          "type": "registry:ui",
+          "target": "components/magicui/pointer.tsx"
+        }
+      ]
+    },
     {
       "name": "neon-gradient-card",
       "type": "registry:ui",
@@ -362,7 +394,9 @@
       "type": "registry:ui",
       "title": "Hero Video Dialog",
       "description": "A hero video dialog component.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/hero-video-dialog.tsx",
@@ -376,7 +410,10 @@
       "type": "registry:ui",
       "title": "Code Comparison",
       "description": "A component which compares two code snippets.",
-      "dependencies": ["shiki", "next-themes"],
+      "dependencies": [
+        "shiki",
+        "next-themes"
+      ],
       "files": [
         {
           "path": "registry/magicui/code-comparison.tsx",
@@ -390,8 +427,14 @@
       "type": "registry:ui",
       "title": "Script Copy Button",
       "description": "Copy code to clipboard",
-      "dependencies": ["motion", "shiki", "next-themes"],
-      "registryDependencies": ["button"],
+      "dependencies": [
+        "motion",
+        "shiki",
+        "next-themes"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
       "files": [
         {
           "path": "registry/magicui/script-copy-btn.tsx",
@@ -448,7 +491,9 @@
       "type": "registry:ui",
       "title": "Globe",
       "description": "An autorotating, interactive, and highly performant globe made using WebGL.",
-      "dependencies": ["cobe"],
+      "dependencies": [
+        "cobe"
+      ],
       "files": [
         {
           "path": "registry/magicui/globe.tsx",
@@ -508,7 +553,9 @@
       "type": "registry:ui",
       "title": "Tweet Card",
       "description": "A card that displays a tweet with the author's name, handle, and profile picture.",
-      "dependencies": ["react-tweet"],
+      "dependencies": [
+        "react-tweet"
+      ],
       "files": [
         {
           "path": "registry/magicui/tweet-card.tsx",
@@ -522,7 +569,9 @@
       "type": "registry:ui",
       "title": "Client Tweet Card",
       "description": "A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.",
-      "dependencies": ["react-tweet"],
+      "dependencies": [
+        "react-tweet"
+      ],
       "files": [
         {
           "path": "registry/magicui/client-tweet-card.tsx",
@@ -536,8 +585,12 @@
       "type": "registry:ui",
       "title": "Bento Grid",
       "description": "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.",
-      "dependencies": ["@radix-ui/react-icons"],
-      "registryDependencies": ["button"],
+      "dependencies": [
+        "@radix-ui/react-icons"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
       "files": [
         {
           "path": "registry/magicui/bento-grid.tsx",
@@ -564,7 +617,9 @@
       "type": "registry:ui",
       "title": "Number Ticker",
       "description": "Animate numbers to count up or down to a target number",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/number-ticker.tsx",
@@ -646,7 +701,9 @@
       "type": "registry:ui",
       "title": "Animated List",
       "description": "A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/animated-list.tsx",
@@ -694,7 +751,9 @@
       "type": "registry:ui",
       "title": "Animated Grid Pattern",
       "description": "A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/animated-grid-pattern.tsx",
@@ -721,7 +780,9 @@
       "type": "registry:ui",
       "title": "Animated Beam",
       "description": "An animated beam of light which travels along a path. Useful for showcasing the \"integration\" features of a website.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/animated-beam.tsx",
@@ -735,7 +796,9 @@
       "type": "registry:ui",
       "title": "Text Reveal",
       "description": "Fade in text as you scroll down the page.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/text-reveal.tsx",
@@ -749,7 +812,9 @@
       "type": "registry:ui",
       "title": "Hyper Text",
       "description": "A text animation that scrambles letters before revealing the final text.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/hyper-text.tsx",
@@ -828,7 +893,9 @@
       "type": "registry:ui",
       "title": "Dock",
       "description": "An implementation of the MacOS dock using react + tailwindcss + motion",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/dock.tsx",
@@ -842,7 +909,9 @@
       "type": "registry:ui",
       "title": "Word Rotate",
       "description": "A vertical rotation of words",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/word-rotate.tsx",
@@ -869,7 +938,9 @@
       "type": "registry:ui",
       "title": "Typing Animation",
       "description": "Characters appearing in typed animation",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/typing-animation.tsx",
@@ -883,7 +954,9 @@
       "type": "registry:ui",
       "title": "Sparkles Text",
       "description": "A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/sparkles-text.tsx",
@@ -897,7 +970,9 @@
       "type": "registry:ui",
       "title": "Spinning Text",
       "description": "The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/spinning-text.tsx",
@@ -911,7 +986,9 @@
       "type": "registry:ui",
       "title": "Flip Text",
       "description": "Text flipping character animation",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/flip-text.tsx",
@@ -939,7 +1016,9 @@
       "type": "registry:ui",
       "title": "Text Animate",
       "description": "A text animation component that animates text using a variety of different animations.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/text-animate.tsx",
@@ -953,7 +1032,9 @@
       "type": "registry:ui",
       "title": "Scroll Based Velocity",
       "description": "Scrolling text whose speed changes based on scroll speed",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/scroll-based-velocity.tsx",
@@ -967,7 +1048,9 @@
       "type": "registry:ui",
       "title": "Scratch To Reveal",
       "description": "The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/scratch-to-reveal.tsx",
@@ -981,7 +1064,9 @@
       "type": "registry:ui",
       "title": "Shiny Button",
       "description": "A shiny button component with dynamic styles in the dark mode or light mode.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/shiny-button.tsx",
@@ -995,7 +1080,9 @@
       "type": "registry:ui",
       "title": "Box Reveal Animation",
       "description": "Sliding box animation that reveals text behind it.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/box-reveal.tsx",
@@ -1059,8 +1146,13 @@
       "type": "registry:ui",
       "title": "Confetti",
       "description": "Confetti animations are best used to delight your users when something special happens",
-      "dependencies": ["canvas-confetti", "@types/canvas-confetti"],
-      "registryDependencies": ["button"],
+      "dependencies": [
+        "canvas-confetti",
+        "@types/canvas-confetti"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
       "files": [
         {
           "path": "registry/magicui/confetti.tsx",
@@ -1074,7 +1166,9 @@
       "type": "registry:ui",
       "title": "Animated Subscribe Button",
       "description": "An animated subscribe button useful for showing a micro animation from intial to final result.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/animated-subscribe-button.tsx",
@@ -1183,7 +1277,9 @@
       "type": "registry:ui",
       "title": "Blur Fade",
       "description": "Blur fade in and out animation. Used to smoothly fade in and out content.",
-      "dependencies": ["motion"],
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/blur-fade.tsx",
@@ -1304,7 +1400,9 @@
       "type": "registry:example",
       "title": "Magic Card Demo",
       "description": "Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.",
-      "registryDependencies": ["https://magicui.design/r/magic-card"],
+      "registryDependencies": [
+        "https://magicui.design/r/magic-card"
+      ],
       "files": [
         {
           "path": "registry/example/magic-card-demo.tsx",
@@ -1323,7 +1421,9 @@
       "type": "registry:example",
       "title": "Android Demo",
       "description": "Example showing a mockup of an Android device.",
-      "registryDependencies": ["https://magicui.design/r/android"],
+      "registryDependencies": [
+        "https://magicui.design/r/android"
+      ],
       "files": [
         {
           "path": "registry/example/android-demo.tsx",
@@ -1342,7 +1442,9 @@
       "type": "registry:example",
       "title": "Android Demo 2",
       "description": "Second example showing a mockup of an Android device.",
-      "registryDependencies": ["https://magicui.design/r/android"],
+      "registryDependencies": [
+        "https://magicui.design/r/android"
+      ],
       "files": [
         {
           "path": "registry/example/android-demo-2.tsx",
@@ -1361,7 +1463,9 @@
       "type": "registry:example",
       "title": "Android Demo 3",
       "description": "Third example showing a mockup of an Android device.",
-      "registryDependencies": ["https://magicui.design/r/android"],
+      "registryDependencies": [
+        "https://magicui.design/r/android"
+      ],
       "files": [
         {
           "path": "registry/example/android-demo-3.tsx",
@@ -1380,7 +1484,9 @@
       "type": "registry:example",
       "title": "Warp Background Demo",
       "description": "Example showing a card with a time warping background effect.",
-      "registryDependencies": ["https://magicui.design/r/warp-background"],
+      "registryDependencies": [
+        "https://magicui.design/r/warp-background"
+      ],
       "files": [
         {
           "path": "registry/example/warp-background-demo.tsx",
@@ -1399,7 +1505,9 @@
       "type": "registry:example",
       "title": "Line Shadow Text Demo",
       "description": "Example showing a text component with a moving line shadow.",
-      "registryDependencies": ["https://magicui.design/r/line-shadow-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/line-shadow-text"
+      ],
       "files": [
         {
           "path": "registry/example/line-shadow-text-demo.tsx",
@@ -1418,7 +1526,9 @@
       "type": "registry:example",
       "title": "Aurora Text Demo",
       "description": "Example showing a beautiful aurora text effect.",
-      "registryDependencies": ["https://magicui.design/r/aurora-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/aurora-text"
+      ],
       "files": [
         {
           "path": "registry/example/aurora-text-demo.tsx",
@@ -1437,7 +1547,9 @@
       "type": "registry:example",
       "title": "Morphing Text Demo",
       "description": "Example showing a dynamic text morphing component.",
-      "registryDependencies": ["https://magicui.design/r/morphing-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/morphing-text"
+      ],
       "files": [
         {
           "path": "registry/example/morphing-text-demo.tsx",
@@ -1456,7 +1568,9 @@
       "type": "registry:example",
       "title": "Scroll Progress Demo",
       "description": "Example showing animated scroll progress for your pages.",
-      "registryDependencies": ["https://magicui.design/r/scroll-progress"],
+      "registryDependencies": [
+        "https://magicui.design/r/scroll-progress"
+      ],
       "files": [
         {
           "path": "registry/example/scroll-progress-demo.tsx",
@@ -1534,12 +1648,30 @@
         }
       ]
     },
+    {
+      "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",
+          "type": "registry:example",
+          "target": "components/pointer-demo-1.tsx"
+        }
+      ]
+    },
     {
       "name": "neon-gradient-card-demo",
       "type": "registry:example",
       "title": "Neon Gradient Card Demo",
       "description": "Example showing a beautiful neon card effect.",
-      "registryDependencies": ["https://magicui.design/r/neon-gradient-card"],
+      "registryDependencies": [
+        "https://magicui.design/r/neon-gradient-card"
+      ],
       "files": [
         {
           "path": "registry/example/neon-gradient-card-demo.tsx",
@@ -1558,7 +1690,9 @@
       "type": "registry:example",
       "title": "Meteors Demo",
       "description": "Example showing a meteor shower effect.",
-      "registryDependencies": ["https://magicui.design/r/meteors"],
+      "registryDependencies": [
+        "https://magicui.design/r/meteors"
+      ],
       "files": [
         {
           "path": "registry/example/meteors-demo.tsx",
@@ -1577,7 +1711,9 @@
       "type": "registry:example",
       "title": "Grid Pattern Demo",
       "description": "Example showing a background grid pattern made with SVGs.",
-      "registryDependencies": ["https://magicui.design/r/grid-pattern"],
+      "registryDependencies": [
+        "https://magicui.design/r/grid-pattern"
+      ],
       "files": [
         {
           "path": "registry/example/grid-pattern-demo.tsx",
@@ -1596,7 +1732,9 @@
       "type": "registry:example",
       "title": "Grid Pattern Linear Gradient",
       "description": "Example showing a grid pattern with linear gradient effects.",
-      "registryDependencies": ["https://magicui.design/r/grid-pattern"],
+      "registryDependencies": [
+        "https://magicui.design/r/grid-pattern"
+      ],
       "files": [
         {
           "path": "registry/example/grid-pattern-linear-gradient.tsx",
@@ -1615,7 +1753,9 @@
       "type": "registry:example",
       "title": "Grid Pattern Dashed",
       "description": "Example showing a dashed grid pattern.",
-      "registryDependencies": ["https://magicui.design/r/grid-pattern"],
+      "registryDependencies": [
+        "https://magicui.design/r/grid-pattern"
+      ],
       "files": [
         {
           "path": "registry/example/grid-pattern-dashed.tsx",
@@ -1634,7 +1774,9 @@
       "type": "registry:example",
       "title": "Dot Pattern Demo",
       "description": "Example showing a background dot pattern made with SVGs.",
-      "registryDependencies": ["https://magicui.design/r/dot-pattern"],
+      "registryDependencies": [
+        "https://magicui.design/r/dot-pattern"
+      ],
       "files": [
         {
           "path": "registry/example/dot-pattern-demo.tsx",
@@ -1653,7 +1795,9 @@
       "type": "registry:example",
       "title": "Dot Pattern Linear Gradient",
       "description": "Example showing a dot pattern with linear gradient effects.",
-      "registryDependencies": ["https://magicui.design/r/dot-pattern"],
+      "registryDependencies": [
+        "https://magicui.design/r/dot-pattern"
+      ],
       "files": [
         {
           "path": "registry/example/dot-pattern-linear-gradient.tsx",
@@ -1672,7 +1816,9 @@
       "type": "registry:example",
       "title": "Flickering Grid Demo",
       "description": "Example showing a flickering grid background.",
-      "registryDependencies": ["https://magicui.design/r/flickering-grid"],
+      "registryDependencies": [
+        "https://magicui.design/r/flickering-grid"
+      ],
       "files": [
         {
           "path": "registry/example/flickering-grid-demo.tsx",
@@ -1691,7 +1837,9 @@
       "type": "registry:example",
       "title": "Flickering Grid Rounded Demo",
       "description": "Example showing a flickering grid background with rounded corners.",
-      "registryDependencies": ["https://magicui.design/r/flickering-grid"],
+      "registryDependencies": [
+        "https://magicui.design/r/flickering-grid"
+      ],
       "files": [
         {
           "path": "registry/example/flickering-grid-rounded-demo.tsx",
@@ -1710,7 +1858,9 @@
       "type": "registry:example",
       "title": "Hero Video Dialog Demo",
       "description": "Example showing a hero video dialog component.",
-      "registryDependencies": ["https://magicui.design/r/hero-video-dialog"],
+      "registryDependencies": [
+        "https://magicui.design/r/hero-video-dialog"
+      ],
       "files": [
         {
           "path": "registry/example/hero-video-dialog-demo.tsx",
@@ -1729,7 +1879,9 @@
       "type": "registry:example",
       "title": "Hero Video Dialog Top In Bottom Out Demo",
       "description": "Example showing a hero video dialog with top-in bottom-out animation.",
-      "registryDependencies": ["https://magicui.design/r/hero-video-dialog"],
+      "registryDependencies": [
+        "https://magicui.design/r/hero-video-dialog"
+      ],
       "files": [
         {
           "path": "registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx",
@@ -1748,7 +1900,9 @@
       "type": "registry:example",
       "title": "Code Comparison Demo",
       "description": "Example showing a component which compares two code snippets.",
-      "registryDependencies": ["https://magicui.design/r/code-comparison"],
+      "registryDependencies": [
+        "https://magicui.design/r/code-comparison"
+      ],
       "files": [
         {
           "path": "registry/example/code-comparison-demo.tsx",
@@ -1767,7 +1921,9 @@
       "type": "registry:example",
       "title": "Script Copy Button Demo",
       "description": "Example showing how to copy code to clipboard.",
-      "registryDependencies": ["https://magicui.design/r/script-copy-btn"],
+      "registryDependencies": [
+        "https://magicui.design/r/script-copy-btn"
+      ],
       "files": [
         {
           "path": "registry/example/script-copy-btn-demo.tsx",
@@ -1786,7 +1942,9 @@
       "type": "registry:example",
       "title": "Marquee Demo",
       "description": "Example showing an infinite scrolling component.",
-      "registryDependencies": ["https://magicui.design/r/marquee"],
+      "registryDependencies": [
+        "https://magicui.design/r/marquee"
+      ],
       "files": [
         {
           "path": "registry/example/marquee-demo.tsx",
@@ -1805,7 +1963,9 @@
       "type": "registry:example",
       "title": "Marquee Vertical Demo",
       "description": "Example showing a vertical infinite scrolling component.",
-      "registryDependencies": ["https://magicui.design/r/marquee"],
+      "registryDependencies": [
+        "https://magicui.design/r/marquee"
+      ],
       "files": [
         {
           "path": "registry/example/marquee-demo-vertical.tsx",
@@ -1824,7 +1984,9 @@
       "type": "registry:example",
       "title": "Marquee Logos",
       "description": "Example showing an infinite scrolling logo carousel.",
-      "registryDependencies": ["https://magicui.design/r/marquee"],
+      "registryDependencies": [
+        "https://magicui.design/r/marquee"
+      ],
       "files": [
         {
           "path": "registry/example/marquee-logos.tsx",
@@ -1843,7 +2005,9 @@
       "type": "registry:example",
       "title": "Marquee 3D",
       "description": "Example showing a 3D infinite scrolling component.",
-      "registryDependencies": ["https://magicui.design/r/marquee"],
+      "registryDependencies": [
+        "https://magicui.design/r/marquee"
+      ],
       "files": [
         {
           "path": "registry/example/marquee-3d.tsx",
@@ -1862,7 +2026,9 @@
       "type": "registry:example",
       "title": "Globe Demo",
       "description": "Example showing an autorotating, interactive WebGL globe.",
-      "registryDependencies": ["https://magicui.design/r/globe"],
+      "registryDependencies": [
+        "https://magicui.design/r/globe"
+      ],
       "files": [
         {
           "path": "registry/example/globe-demo.tsx",
@@ -1881,7 +2047,9 @@
       "type": "registry:example",
       "title": "Tweet Card Demo",
       "description": "Example showing a tweet card with author info.",
-      "registryDependencies": ["https://magicui.design/r/tweet-card"],
+      "registryDependencies": [
+        "https://magicui.design/r/tweet-card"
+      ],
       "files": [
         {
           "path": "registry/example/tweet-card-demo.tsx",
@@ -1900,7 +2068,9 @@
       "type": "registry:example",
       "title": "Tweet Card Images",
       "description": "Example showing a tweet card with images.",
-      "registryDependencies": ["https://magicui.design/r/tweet-card"],
+      "registryDependencies": [
+        "https://magicui.design/r/tweet-card"
+      ],
       "files": [
         {
           "path": "registry/example/tweet-card-images.tsx",
@@ -1919,7 +2089,9 @@
       "type": "registry:example",
       "title": "Tweet Card Meta Preview",
       "description": "Example showing a tweet card with meta preview.",
-      "registryDependencies": ["https://magicui.design/r/tweet-card"],
+      "registryDependencies": [
+        "https://magicui.design/r/tweet-card"
+      ],
       "files": [
         {
           "path": "registry/example/tweet-card-meta-preview.tsx",
@@ -1938,7 +2110,9 @@
       "type": "registry:example",
       "title": "Shimmer Button Demo",
       "description": "Example showing a button with a shimmering light effect.",
-      "registryDependencies": ["https://magicui.design/r/shimmer-button"],
+      "registryDependencies": [
+        "https://magicui.design/r/shimmer-button"
+      ],
       "files": [
         {
           "path": "registry/example/shimmer-button-demo.tsx",
@@ -1957,7 +2131,9 @@
       "type": "registry:example",
       "title": "Bento Demo",
       "description": "Example showing a bento grid layout for showcasing features.",
-      "dependencies": ["@radix-ui/react-icons"],
+      "dependencies": [
+        "@radix-ui/react-icons"
+      ],
       "registryDependencies": [
         "button",
         "calendar",
@@ -2009,8 +2185,12 @@
       "type": "registry:example",
       "title": "Bento Vertical Demo",
       "description": "Example showing a vertical bento grid layout.",
-      "dependencies": ["@radix-ui/react-icons"],
-      "registryDependencies": ["https://magicui.design/r/bento-grid"],
+      "dependencies": [
+        "@radix-ui/react-icons"
+      ],
+      "registryDependencies": [
+        "https://magicui.design/r/bento-grid"
+      ],
       "files": [
         {
           "path": "registry/example/bento-demo-vertical.tsx",
@@ -2029,7 +2209,9 @@
       "type": "registry:example",
       "title": "Number Ticker Demo",
       "description": "Example showing animated counting numbers.",
-      "registryDependencies": ["https://magicui.design/r/number-ticker"],
+      "registryDependencies": [
+        "https://magicui.design/r/number-ticker"
+      ],
       "files": [
         {
           "path": "registry/example/number-ticker-demo.tsx",
@@ -2048,7 +2230,9 @@
       "type": "registry:example",
       "title": "Number Ticker Decimal Demo",
       "description": "Example showing animated counting decimal numbers.",
-      "registryDependencies": ["https://magicui.design/r/number-ticker"],
+      "registryDependencies": [
+        "https://magicui.design/r/number-ticker"
+      ],
       "files": [
         {
           "path": "registry/example/number-ticker-decimal-demo.tsx",
@@ -2067,7 +2251,9 @@
       "type": "registry:example",
       "title": "Ripple Demo",
       "description": "Example showing an animated ripple effect.",
-      "registryDependencies": ["https://magicui.design/r/ripple"],
+      "registryDependencies": [
+        "https://magicui.design/r/ripple"
+      ],
       "files": [
         {
           "path": "registry/example/ripple-demo.tsx",
@@ -2086,7 +2272,9 @@
       "type": "registry:example",
       "title": "Retro Grid Demo",
       "description": "Example showing an animated scrolling retro grid effect.",
-      "registryDependencies": ["https://magicui.design/r/retro-grid"],
+      "registryDependencies": [
+        "https://magicui.design/r/retro-grid"
+      ],
       "files": [
         {
           "path": "registry/example/retro-grid-demo.tsx",
@@ -2105,7 +2293,9 @@
       "type": "registry:example",
       "title": "Animated List Demo",
       "description": "Example showing a list with sequenced item animations.",
-      "registryDependencies": ["https://magicui.design/r/animated-list"],
+      "registryDependencies": [
+        "https://magicui.design/r/animated-list"
+      ],
       "files": [
         {
           "path": "registry/example/animated-list-demo.tsx",
@@ -2124,8 +2314,12 @@
       "type": "registry:example",
       "title": "Animated Shiny Text Demo",
       "description": "Example showing text with a shimmering light effect.",
-      "dependencies": ["@radix-ui/react-icons"],
-      "registryDependencies": ["https://magicui.design/r/animated-shiny-text"],
+      "dependencies": [
+        "@radix-ui/react-icons"
+      ],
+      "registryDependencies": [
+        "https://magicui.design/r/animated-shiny-text"
+      ],
       "files": [
         {
           "path": "registry/example/animated-shiny-text-demo.tsx",
@@ -2144,8 +2338,12 @@
       "type": "registry:example",
       "title": "Particles Demo",
       "description": "Example showing interactive particle effects.",
-      "dependencies": ["next-themes"],
-      "registryDependencies": ["https://magicui.design/r/particles"],
+      "dependencies": [
+        "next-themes"
+      ],
+      "registryDependencies": [
+        "https://magicui.design/r/particles"
+      ],
       "files": [
         {
           "path": "registry/example/particles-demo.tsx",
@@ -2227,7 +2425,9 @@
       "type": "registry:example",
       "title": "Border Beam Demo",
       "description": "Example showing an animated border beam effect.",
-      "registryDependencies": ["https://magicui.design/r/border-beam"],
+      "registryDependencies": [
+        "https://magicui.design/r/border-beam"
+      ],
       "files": [
         {
           "path": "registry/example/border-beam-demo.tsx",
@@ -2316,8 +2516,12 @@
       "type": "registry:example",
       "title": "Animated Beam Demo",
       "description": "Example showing an animated beam of light effect.",
-      "dependencies": ["@radix-ui/react-icons"],
-      "registryDependencies": ["https://magicui.design/r/animated-beam"],
+      "dependencies": [
+        "@radix-ui/react-icons"
+      ],
+      "registryDependencies": [
+        "https://magicui.design/r/animated-beam"
+      ],
       "files": [
         {
           "path": "registry/example/animated-beam-demo.tsx",
@@ -2336,7 +2540,9 @@
       "type": "registry:example",
       "title": "Animated Beam Unidirectional",
       "description": "Example showing a unidirectional animated beam effect.",
-      "registryDependencies": ["https://magicui.design/r/animated-beam"],
+      "registryDependencies": [
+        "https://magicui.design/r/animated-beam"
+      ],
       "files": [
         {
           "path": "registry/example/animated-beam-unidirectional.tsx",
@@ -2355,7 +2561,9 @@
       "type": "registry:example",
       "title": "Animated Beam Bidirectional",
       "description": "Example showing a bidirectional animated beam effect.",
-      "registryDependencies": ["https://magicui.design/r/animated-beam"],
+      "registryDependencies": [
+        "https://magicui.design/r/animated-beam"
+      ],
       "files": [
         {
           "path": "registry/example/animated-beam-bidirectional.tsx",
@@ -2374,7 +2582,9 @@
       "type": "registry:example",
       "title": "Animated Beam Multiple Inputs",
       "description": "Example showing animated beams with multiple input points.",
-      "registryDependencies": ["https://magicui.design/r/animated-beam"],
+      "registryDependencies": [
+        "https://magicui.design/r/animated-beam"
+      ],
       "files": [
         {
           "path": "registry/example/animated-beam-multiple-inputs.tsx",
@@ -2393,7 +2603,9 @@
       "type": "registry:example",
       "title": "Animated Beam Multiple Outputs",
       "description": "Example showing animated beams with multiple output points.",
-      "registryDependencies": ["https://magicui.design/r/animated-beam"],
+      "registryDependencies": [
+        "https://magicui.design/r/animated-beam"
+      ],
       "files": [
         {
           "path": "registry/example/animated-beam-multiple-outputs.tsx",
@@ -2412,7 +2624,9 @@
       "type": "registry:example",
       "title": "Text Reveal Demo",
       "description": "Example showing text that fades in on scroll.",
-      "registryDependencies": ["https://magicui.design/r/text-reveal"],
+      "registryDependencies": [
+        "https://magicui.design/r/text-reveal"
+      ],
       "files": [
         {
           "path": "registry/example/text-reveal-demo.tsx",
@@ -2431,7 +2645,9 @@
       "type": "registry:example",
       "title": "Animated Gradient Text Demo",
       "description": "Example showing text with animated gradient backgrounds.",
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [
         "https://magicui.design/r/animated-gradient-text"
       ],
@@ -2453,8 +2669,12 @@
       "type": "registry:example",
       "title": "Orbiting Circles Demo",
       "description": "Example showing circles moving in orbital paths.",
-      "dependencies": ["@radix-ui/react-icons"],
-      "registryDependencies": ["https://magicui.design/r/orbiting-circles"],
+      "dependencies": [
+        "@radix-ui/react-icons"
+      ],
+      "registryDependencies": [
+        "https://magicui.design/r/orbiting-circles"
+      ],
       "files": [
         {
           "path": "registry/example/orbiting-circles-demo.tsx",
@@ -2473,8 +2693,13 @@
       "type": "registry:example",
       "title": "Dock Demo",
       "description": "Example showing a MacOS-style dock implementation.",
-      "dependencies": ["next-themes"],
-      "registryDependencies": ["button", "https://magicui.design/r/dock"],
+      "dependencies": [
+        "next-themes"
+      ],
+      "registryDependencies": [
+        "button",
+        "https://magicui.design/r/dock"
+      ],
       "files": [
         {
           "path": "registry/example/dock-demo.tsx",
@@ -2498,7 +2723,9 @@
       "type": "registry:example",
       "title": "Dock Demo 2",
       "description": "Second example showing a MacOS-style dock implementation.",
-      "registryDependencies": ["https://magicui.design/r/dock"],
+      "registryDependencies": [
+        "https://magicui.design/r/dock"
+      ],
       "files": [
         {
           "path": "registry/example/dock-demo-2.tsx",
@@ -2517,7 +2744,9 @@
       "type": "registry:example",
       "title": "Dock Demo 3",
       "description": "Third example showing a MacOS-style dock implementation.",
-      "registryDependencies": ["https://magicui.design/r/dock"],
+      "registryDependencies": [
+        "https://magicui.design/r/dock"
+      ],
       "files": [
         {
           "path": "registry/example/dock-demo-3.tsx",
@@ -2536,7 +2765,9 @@
       "type": "registry:example",
       "title": "Word Rotate Demo",
       "description": "Example showing vertical word rotation animation.",
-      "registryDependencies": ["https://magicui.design/r/word-rotate"],
+      "registryDependencies": [
+        "https://magicui.design/r/word-rotate"
+      ],
       "files": [
         {
           "path": "registry/example/word-rotate-demo.tsx",
@@ -2555,7 +2786,9 @@
       "type": "registry:example",
       "title": "Hyper Text Demo",
       "description": "Example showing text with scrambling letter animations.",
-      "registryDependencies": ["https://magicui.design/r/hyper-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/hyper-text"
+      ],
       "files": [
         {
           "path": "registry/example/hyper-text-demo.tsx",
@@ -2574,7 +2807,9 @@
       "type": "registry:example",
       "title": "Avatar Circles Demo",
       "description": "Example showing overlapping avatar circles.",
-      "registryDependencies": ["https://magicui.design/r/avatar-circles"],
+      "registryDependencies": [
+        "https://magicui.design/r/avatar-circles"
+      ],
       "files": [
         {
           "path": "registry/example/avatar-circles-demo.tsx",
@@ -2593,7 +2828,9 @@
       "type": "registry:example",
       "title": "Typing Animation Demo",
       "description": "Example showing typed character animations.",
-      "registryDependencies": ["https://magicui.design/r/typing-animation"],
+      "registryDependencies": [
+        "https://magicui.design/r/typing-animation"
+      ],
       "files": [
         {
           "path": "registry/example/typing-animation-demo.tsx",
@@ -2633,7 +2870,9 @@
       "type": "registry:example",
       "title": "Scratch To Reveal Demo",
       "description": "Example showing an interactive scratch-off reveal effect.",
-      "registryDependencies": ["https://magicui.design/r/scratch-to-reveal"],
+      "registryDependencies": [
+        "https://magicui.design/r/scratch-to-reveal"
+      ],
       "files": [
         {
           "path": "registry/example/scratch-to-reveal-demo.tsx",
@@ -2652,7 +2891,9 @@
       "type": "registry:example",
       "title": "Flip Text Demo",
       "description": "Example showing text with character flip animations.",
-      "registryDependencies": ["https://magicui.design/r/flip-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/flip-text"
+      ],
       "files": [
         {
           "path": "registry/example/flip-text-demo.tsx",
@@ -2671,7 +2912,9 @@
       "type": "registry:example",
       "title": "Sparkles Text Demo",
       "description": "Example showing text with animated sparkle effects.",
-      "registryDependencies": ["https://magicui.design/r/sparkles-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/sparkles-text"
+      ],
       "files": [
         {
           "path": "registry/example/sparkles-text-demo.tsx",
@@ -2690,7 +2933,9 @@
       "type": "registry:example",
       "title": "Spinning Text Demo",
       "description": "Example showing spinning text animation.",
-      "registryDependencies": ["https://magicui.design/r/spinning-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/spinning-text"
+      ],
       "files": [
         {
           "path": "registry/example/spinning-text-demo.tsx",
@@ -2709,7 +2954,9 @@
       "type": "registry:example",
       "title": "Spinning Text Demo 2",
       "description": "Example showing spinning text animation.",
-      "registryDependencies": ["https://magicui.design/r/spinning-text"],
+      "registryDependencies": [
+        "https://magicui.design/r/spinning-text"
+      ],
       "files": [
         {
           "path": "registry/example/spinning-text-demo-2.tsx",
@@ -2728,7 +2975,9 @@
       "type": "registry:example",
       "title": "Icon Cloud Demo",
       "description": "Example showing an interactive 3D icon cloud.",
-      "registryDependencies": ["https://magicui.design/r/icon-cloud"],
+      "registryDependencies": [
+        "https://magicui.design/r/icon-cloud"
+      ],
       "files": [
         {
           "path": "registry/example/icon-cloud-demo.tsx",
@@ -2747,7 +2996,9 @@
       "type": "registry:example",
       "title": "Icon Cloud Demo 2",
       "description": "Second example showing an interactive 3D icon cloud.",
-      "registryDependencies": ["https://magicui.design/r/icon-cloud"],
+      "registryDependencies": [
+        "https://magicui.design/r/icon-cloud"
+      ],
       "files": [
         {
           "path": "registry/example/icon-cloud-demo-2.tsx",
@@ -2766,7 +3017,9 @@
       "type": "registry:example",
       "title": "Icon Cloud Demo 3",
       "description": "Third example showing an interactive 3D icon cloud.",
-      "registryDependencies": ["https://magicui.design/r/icon-cloud"],
+      "registryDependencies": [
+        "https://magicui.design/r/icon-cloud"
+      ],
       "files": [
         {
           "path": "registry/example/icon-cloud-demo-3.tsx",
@@ -2785,7 +3038,9 @@
       "type": "registry:example",
       "title": "Text Animate Demo",
       "description": "Example showing various text animations.",
-      "registryDependencies": ["https://magicui.design/r/text-animate"],
+      "registryDependencies": [
+        "https://magicui.design/r/text-animate"
+      ],
       "files": [
         {
           "path": "registry/example/text-animate-demo.tsx",
@@ -2804,7 +3059,9 @@
       "type": "registry:example",
       "title": "Text Animate Demo 2",
       "description": "Second example showing various text animations.",
-      "registryDependencies": ["https://magicui.design/r/text-animate"],
+      "registryDependencies": [
+        "https://magicui.design/r/text-animate"
+      ],
       "files": [
         {
           "path": "registry/example/text-animate-demo-2.tsx",
@@ -2823,7 +3080,9 @@
       "type": "registry:example",
       "title": "Text Animate Demo 3",
       "description": "Third example showing various text animations.",
-      "registryDependencies": ["https://magicui.design/r/text-animate"],
+      "registryDependencies": [
+        "https://magicui.design/r/text-animate"
+      ],
       "files": [
         {
           "path": "registry/example/text-animate-demo-3.tsx",
@@ -2842,7 +3101,9 @@
       "type": "registry:example",
       "title": "Text Animate Demo 4",
       "description": "Fourth example showing various text animations.",
-      "registryDependencies": ["https://magicui.design/r/text-animate"],
+      "registryDependencies": [
+        "https://magicui.design/r/text-animate"
+      ],
       "files": [
         {
           "path": "registry/example/text-animate-demo-4.tsx",
@@ -2861,7 +3122,9 @@
       "type": "registry:example",
       "title": "Text Animate Demo 5",
       "description": "Fifth example showing various text animations.",
-      "registryDependencies": ["https://magicui.design/r/text-animate"],
+      "registryDependencies": [
+        "https://magicui.design/r/text-animate"
+      ],
       "files": [
         {
           "path": "registry/example/text-animate-demo-5.tsx",
@@ -2880,7 +3143,9 @@
       "type": "registry:example",
       "title": "Text Animate Demo 6",
       "description": "Sixth example showing various text animations.",
-      "registryDependencies": ["https://magicui.design/r/text-animate"],
+      "registryDependencies": [
+        "https://magicui.design/r/text-animate"
+      ],
       "files": [
         {
           "path": "registry/example/text-animate-demo-6.tsx",
@@ -2899,7 +3164,9 @@
       "type": "registry:example",
       "title": "Shiny Button Demo",
       "description": "Example showing a shiny button with dynamic styles.",
-      "registryDependencies": ["https://magicui.design/r/shiny-button"],
+      "registryDependencies": [
+        "https://magicui.design/r/shiny-button"
+      ],
       "files": [
         {
           "path": "registry/example/shiny-button-demo.tsx",
@@ -2918,7 +3185,9 @@
       "type": "registry:example",
       "title": "Box Reveal Demo",
       "description": "Example showing a sliding box text reveal animation.",
-      "registryDependencies": ["https://magicui.design/r/box-reveal"],
+      "registryDependencies": [
+        "https://magicui.design/r/box-reveal"
+      ],
       "files": [
         {
           "path": "registry/example/box-reveal-demo.tsx",
@@ -2958,7 +3227,9 @@
       "type": "registry:example",
       "title": "Shine Border Demo",
       "description": "Example showing an animated shining border effect.",
-      "registryDependencies": ["https://magicui.design/r/shine-border"],
+      "registryDependencies": [
+        "https://magicui.design/r/shine-border"
+      ],
       "files": [
         {
           "path": "registry/example/shine-border-demo.tsx",
@@ -2977,7 +3248,9 @@
       "type": "registry:example",
       "title": "Shine Border Demo 2",
       "description": "Second example showing an animated shining border effect.",
-      "registryDependencies": ["https://magicui.design/r/shine-border"],
+      "registryDependencies": [
+        "https://magicui.design/r/shine-border"
+      ],
       "files": [
         {
           "path": "registry/example/shine-border-demo-2.tsx",
@@ -2996,7 +3269,9 @@
       "type": "registry:example",
       "title": "Confetti Demo",
       "description": "Example showing confetti animations for celebrations.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-demo.tsx",
@@ -3015,7 +3290,9 @@
       "type": "registry:example",
       "title": "Confetti Basic Cannon",
       "description": "Example showing basic confetti cannon animation.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-basic-cannon.tsx",
@@ -3034,7 +3311,9 @@
       "type": "registry:example",
       "title": "Confetti Random Direction",
       "description": "Example showing confetti with random directions.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-random-direction.tsx",
@@ -3053,7 +3332,9 @@
       "type": "registry:example",
       "title": "Confetti Fireworks",
       "description": "Example showing fireworks-style confetti animation.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-fireworks.tsx",
@@ -3072,7 +3353,9 @@
       "type": "registry:example",
       "title": "Confetti Stars",
       "description": "Example showing star-shaped confetti animation.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-stars.tsx",
@@ -3091,7 +3374,9 @@
       "type": "registry:example",
       "title": "Confetti Side Cannons",
       "description": "Example showing side-mounted confetti cannons.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-side-cannons.tsx",
@@ -3110,7 +3395,9 @@
       "type": "registry:example",
       "title": "Confetti Custom Shapes",
       "description": "Example showing confetti with custom shape particles.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-custom-shapes.tsx",
@@ -3129,7 +3416,9 @@
       "type": "registry:example",
       "title": "Confetti Emoji",
       "description": "Example showing confetti with emoji particles.",
-      "registryDependencies": ["https://magicui.design/r/confetti"],
+      "registryDependencies": [
+        "https://magicui.design/r/confetti"
+      ],
       "files": [
         {
           "path": "registry/example/confetti-emoji.tsx",
@@ -3169,7 +3458,9 @@
       "type": "registry:example",
       "title": "Cool Mode Demo",
       "description": "Example showing cool mode effect for buttons and links.",
-      "registryDependencies": ["https://magicui.design/r/cool-mode"],
+      "registryDependencies": [
+        "https://magicui.design/r/cool-mode"
+      ],
       "files": [
         {
           "path": "registry/example/cool-mode-demo.tsx",
@@ -3188,7 +3479,9 @@
       "type": "registry:example",
       "title": "Cool Mode Custom",
       "description": "Example showing customized cool mode effects.",
-      "registryDependencies": ["https://magicui.design/r/cool-mode"],
+      "registryDependencies": [
+        "https://magicui.design/r/cool-mode"
+      ],
       "files": [
         {
           "path": "registry/example/cool-mode-custom.tsx",
@@ -3207,7 +3500,9 @@
       "type": "registry:example",
       "title": "Pulsating Button Demo",
       "description": "Example showing an animated pulsating button.",
-      "registryDependencies": ["https://magicui.design/r/pulsating-button"],
+      "registryDependencies": [
+        "https://magicui.design/r/pulsating-button"
+      ],
       "files": [
         {
           "path": "registry/example/pulsating-button-demo.tsx",
@@ -3226,7 +3521,9 @@
       "type": "registry:example",
       "title": "Ripple Button Demo",
       "description": "Example showing an animated button with ripple effect.",
-      "registryDependencies": ["https://magicui.design/r/ripple-button"],
+      "registryDependencies": [
+        "https://magicui.design/r/ripple-button"
+      ],
       "files": [
         {
           "path": "registry/example/ripple-button-demo.tsx",
@@ -3245,7 +3542,9 @@
       "type": "registry:example",
       "title": "File Tree Demo",
       "description": "Example showing a component that displays folder and file structure.",
-      "registryDependencies": ["https://magicui.design/r/file-tree"],
+      "registryDependencies": [
+        "https://magicui.design/r/file-tree"
+      ],
       "files": [
         {
           "path": "registry/example/file-tree-demo.tsx",
@@ -3264,7 +3563,9 @@
       "type": "registry:example",
       "title": "Blur Fade Demo",
       "description": "Example showing blur fade in and out animations.",
-      "registryDependencies": ["https://magicui.design/r/blur-fade"],
+      "registryDependencies": [
+        "https://magicui.design/r/blur-fade"
+      ],
       "files": [
         {
           "path": "registry/example/blur-fade-demo.tsx",
@@ -3283,7 +3584,9 @@
       "type": "registry:example",
       "title": "Blur Fade Text Demo",
       "description": "Example showing blur fade animations with text.",
-      "registryDependencies": ["https://magicui.design/r/blur-fade"],
+      "registryDependencies": [
+        "https://magicui.design/r/blur-fade"
+      ],
       "files": [
         {
           "path": "registry/example/blur-fade-text-demo.tsx",
@@ -3302,7 +3605,9 @@
       "type": "registry:example",
       "title": "Safari Demo",
       "description": "Example showing a Safari browser mockup.",
-      "registryDependencies": ["https://magicui.design/r/safari"],
+      "registryDependencies": [
+        "https://magicui.design/r/safari"
+      ],
       "files": [
         {
           "path": "registry/example/safari-demo.tsx",
@@ -3321,7 +3626,9 @@
       "type": "registry:example",
       "title": "Safari Demo 2",
       "description": "Second example showing a Safari browser mockup.",
-      "registryDependencies": ["https://magicui.design/r/safari"],
+      "registryDependencies": [
+        "https://magicui.design/r/safari"
+      ],
       "files": [
         {
           "path": "registry/example/safari-demo-2.tsx",
@@ -3340,7 +3647,9 @@
       "type": "registry:example",
       "title": "Safari Demo 3",
       "description": "Third example showing a Safari browser mockup.",
-      "registryDependencies": ["https://magicui.design/r/safari"],
+      "registryDependencies": [
+        "https://magicui.design/r/safari"
+      ],
       "files": [
         {
           "path": "registry/example/safari-demo-3.tsx",
@@ -3359,7 +3668,9 @@
       "type": "registry:example",
       "title": "Safari Demo 4",
       "description": "Fourth example showing a Safari browser mockup.",
-      "registryDependencies": ["https://magicui.design/r/safari"],
+      "registryDependencies": [
+        "https://magicui.design/r/safari"
+      ],
       "files": [
         {
           "path": "registry/example/safari-demo-4.tsx",
@@ -3378,7 +3689,9 @@
       "type": "registry:example",
       "title": "iPhone 15 Pro Demo",
       "description": "Example showing an iPhone 15 Pro mockup.",
-      "registryDependencies": ["https://magicui.design/r/iphone-15-pro"],
+      "registryDependencies": [
+        "https://magicui.design/r/iphone-15-pro"
+      ],
       "files": [
         {
           "path": "registry/example/iphone-15-pro-demo.tsx",
@@ -3397,7 +3710,9 @@
       "type": "registry:example",
       "title": "iPhone 15 Pro Demo 2",
       "description": "Second example showing an iPhone 15 Pro mockup.",
-      "registryDependencies": ["https://magicui.design/r/iphone-15-pro"],
+      "registryDependencies": [
+        "https://magicui.design/r/iphone-15-pro"
+      ],
       "files": [
         {
           "path": "registry/example/iphone-15-pro-demo-2.tsx",
@@ -3416,7 +3731,9 @@
       "type": "registry:example",
       "title": "iPhone 15 Pro Demo 3",
       "description": "Third example showing an iPhone 15 Pro mockup.",
-      "registryDependencies": ["https://magicui.design/r/iphone-15-pro"],
+      "registryDependencies": [
+        "https://magicui.design/r/iphone-15-pro"
+      ],
       "files": [
         {
           "path": "registry/example/iphone-15-pro-demo-3.tsx",
@@ -3435,7 +3752,9 @@
       "type": "registry:example",
       "title": "Rainbow Button Demo",
       "description": "Example showing an animated button with rainbow effect.",
-      "registryDependencies": ["https://magicui.design/r/rainbow-button"],
+      "registryDependencies": [
+        "https://magicui.design/r/rainbow-button"
+      ],
       "files": [
         {
           "path": "registry/example/rainbow-button-demo.tsx",
@@ -3475,7 +3794,9 @@
       "type": "registry:example",
       "title": "Terminal Demo",
       "description": "Example showing a terminal with animated text.",
-      "registryDependencies": ["https://magicui.design/r/terminal"],
+      "registryDependencies": [
+        "https://magicui.design/r/terminal"
+      ],
       "files": [
         {
           "path": "registry/example/terminal-demo.tsx",
@@ -3492,7 +3813,10 @@
     {
       "name": "utils",
       "type": "registry:lib",
-      "dependencies": ["clsx", "tailwind-merge"],
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
       "files": [
         {
           "path": "registry/lib/utils.ts",
@@ -3501,4 +3825,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/registry/example/pointer-demo-1.tsx b/registry/example/pointer-demo-1.tsx
new file mode 100644
index 000000000..bccc548d0
--- /dev/null
+++ b/registry/example/pointer-demo-1.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { PointerWrapper } from "@/registry/magicui/pointer";
+
+export default function PointerDemo1() {
+  return (
+    <PointerWrapper>
+      <div className="relative flex size-[500px] items-center justify-center overflow-hidden rounded-lg border bg-background">
+        <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">
+          Pointer
+        </span>
+      </div>
+    </PointerWrapper>
+  );
+}
diff --git a/registry/magicui/pointer.tsx b/registry/magicui/pointer.tsx
new file mode 100644
index 000000000..5abb1cc11
--- /dev/null
+++ b/registry/magicui/pointer.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion, useMotionValue } from "motion/react";
+import React, { useEffect, useRef, useState } from "react";
+
+/**
+ * @property {React.ReactNode} children - The child elements to be wrapped
+ */
+interface PointerWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+/**
+ * A component that wraps content and adds a custom pointer animation when hovering
+ * over the wrapped area. The pointer follows the mouse movement within the wrapped area.
+ *
+ * @component
+ * @param {PointerWrapperProps} props - The component props
+ */
+export function PointerWrapper({
+  children,
+  className,
+  ...props
+}: PointerWrapperProps) {
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  const [isInside, setIsInside] = useState<boolean>(false);
+
+  useEffect(() => {
+    function updateRect() {
+      if (ref.current) {
+        setRect(ref.current.getBoundingClientRect());
+      }
+    }
+
+    // Initial rect calculation
+    updateRect();
+
+    // Update rect on window resize
+    window.addEventListener("resize", updateRect);
+
+    return () => {
+      window.removeEventListener("resize", updateRect);
+    };
+  }, []);
+
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    if (rect) {
+      x.set(e.clientX - rect.left);
+      y.set(e.clientY - rect.top);
+    }
+  }
+
+  function handleMouseLeave() {
+    setIsInside(false);
+  }
+
+  function handleMouseEnter() {
+    if (ref.current) {
+      setRect(ref.current.getBoundingClientRect());
+      setIsInside(true);
+    }
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn("relative cursor-none", className)}
+      onMouseLeave={handleMouseLeave}
+      onMouseEnter={handleMouseEnter}
+      onMouseMove={handleMouseMove}
+      {...props}
+    >
+      <AnimatePresence>{isInside && <Pointer x={x} y={y} />}</AnimatePresence>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * @property {MotionValue<number>} x - The x-coordinate position of the pointer
+ * @property {MotionValue<number>} y - The y-coordinate position of the pointer
+ */
+interface PointerProps {
+  x: any;
+  y: any;
+}
+
+/**
+ * A custom pointer component that displays an animated arrow cursor
+ *
+ * @description Used internally by PointerWrapper to show the custom cursor
+ *
+ * @component
+ * @param {PointerProps} props - The component props
+ */
+function Pointer({ x, y }: PointerProps): JSX.Element {
+  return (
+    <motion.div
+      className="pointer-events-none absolute z-50 h-4 w-4 rounded-full"
+      style={{
+        top: y,
+        left: x,
+      }}
+      initial={{
+        scale: 1,
+        opacity: 1,
+      }}
+      animate={{
+        scale: 1,
+        opacity: 1,
+      }}
+      exit={{
+        scale: 0,
+        opacity: 0,
+      }}
+    >
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth="1"
+        viewBox="0 0 16 16"
+        className="h-6 w-6 translate-x-[-12px] translate-y-[-10px] rotate-[-70deg] stroke-white text-black"
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <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>
+      </svg>
+    </motion.div>
+  );
+}
diff --git a/registry/registry-examples.ts b/registry/registry-examples.ts
index df48aabf8..1b4318f6b 100644
--- a/registry/registry-examples.ts
+++ b/registry/registry-examples.ts
@@ -226,6 +226,20 @@ export const examples: Registry["items"] = [
       },
     ],
   },
+  {
+    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",
+        type: "registry:example",
+        target: "components/pointer-demo-1.tsx",
+      },
+    ],
+  },
   {
     name: "neon-gradient-card-demo",
     type: "registry:example",
diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts
index 44820eb33..7c61e816e 100644
--- a/registry/registry-ui.ts
+++ b/registry/registry-ui.ts
@@ -174,6 +174,21 @@ export const ui: Registry["items"] = [
       },
     ],
   },
+  {
+    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",
+        type: "registry:ui",
+        target: "components/magicui/pointer.tsx",
+      },
+    ],
+  },
   {
     name: "neon-gradient-card",
     type: "registry:ui",