From f445c1b2f6adb62dfb4233a5995066f70094cbfb Mon Sep 17 00:00:00 2001
From: Isaac Hermel <isaachermel@gmail.com>
Date: Tue, 11 Feb 2025 13:41:20 -0300
Subject: [PATCH 1/6] feat: add Pointer component to registry and documentation

---
 config/docs.ts                      |   6 ++
 content/docs/components/pointer.mdx |  46 ++++++++++
 registry/example/pointer-demo-1.tsx |  22 +++++
 registry/magicui/pointer.tsx        | 127 ++++++++++++++++++++++++++++
 registry/registry-examples.ts       |  17 ++++
 registry/registry-ui.ts             |  14 +++
 6 files changed, 232 insertions(+)
 create mode 100644 content/docs/components/pointer.mdx
 create mode 100644 registry/example/pointer-demo-1.tsx
 create mode 100644 registry/magicui/pointer.tsx

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..702d874f9
--- /dev/null
+++ b/content/docs/components/pointer.mdx
@@ -0,0 +1,46 @@
+---
+title: Pointer
+date: 2025-02-11
+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/registry/example/pointer-demo-1.tsx b/registry/example/pointer-demo-1.tsx
new file mode 100644
index 000000000..a016612ef
--- /dev/null
+++ b/registry/example/pointer-demo-1.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { PointerWrapper } from "@/registry/magicui/pointer";
+import { DotPattern } from "@/registry/magicui/dot-pattern";
+import { cn } from "@/lib/utils";
+
+export default function PointerDemo1() {
+  return (
+    <PointerWrapper className="w-full">
+      <div className="relative h-[500px] w-full flex items-center justify-center overflow-hidden rounded-lg border bg-background">
+        <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white">
+          Pointer
+        </p>
+        <DotPattern
+          className={cn(
+            "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
+          )}
+        />
+      </div>
+    </PointerWrapper>
+  );
+}
diff --git a/registry/magicui/pointer.tsx b/registry/magicui/pointer.tsx
new file mode 100644
index 000000000..8eccb603d
--- /dev/null
+++ b/registry/magicui/pointer.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+
+import { AnimatePresence, motion, useMotionValue } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * @property {React.ReactNode} children - The child elements to be wrapped
+ * @property {string} [className] - Optional CSS classes to be applied to the wrapper
+ */
+interface PointerWrapperProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * 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 }: 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(() => {
+    if (ref.current) {
+      setRect(ref.current.getBoundingClientRect());
+    }
+  }, []);
+
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    if (rect) {
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+
+      x.set(e.clientX - rect.left + scrollX);
+      y.set(e.clientY - rect.top + scrollY);
+    }
+  }
+
+  function handleMouseLeave() {
+    setIsInside(false);
+  }
+
+  function handleMouseEnter() {
+    setIsInside(true);
+  }
+
+  return (
+    <div
+      className={cn("relative", className)}
+      ref={ref}
+      style={{
+        cursor: "none",
+      }}
+      onMouseLeave={handleMouseLeave}
+      onMouseEnter={handleMouseEnter}
+      onMouseMove={handleMouseMove}
+    >
+      <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="h-4 w-4 rounded-full absolute z-50"
+      style={{
+        top: y,
+        left: x,
+        pointerEvents: "none",
+      }}
+      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 text-black transform -rotate-[70deg] -translate-x-[12px] -translate-y-[10px] stroke-white"
+        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..5c887c5a6 100644
--- a/registry/registry-examples.ts
+++ b/registry/registry-examples.ts
@@ -226,6 +226,23 @@ 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/dot-pattern",
+      "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..a91c19eda 100644
--- a/registry/registry-ui.ts
+++ b/registry/registry-ui.ts
@@ -174,6 +174,20 @@ 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",

From 5b4eb69e4b78990115b1ad624450ca133d6092b1 Mon Sep 17 00:00:00 2001
From: Isaac Hermel <isaachermel@gmail.com>
Date: Tue, 11 Feb 2025 13:42:21 -0300
Subject: [PATCH 2/6] fix: format and lint pointer registry and demo files

---
 registry/example/pointer-demo-1.tsx | 2 +-
 registry/registry-ui.ts             | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/registry/example/pointer-demo-1.tsx b/registry/example/pointer-demo-1.tsx
index a016612ef..c54fde359 100644
--- a/registry/example/pointer-demo-1.tsx
+++ b/registry/example/pointer-demo-1.tsx
@@ -13,7 +13,7 @@ export default function PointerDemo1() {
         </p>
         <DotPattern
           className={cn(
-            "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
+            "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]",
           )}
         />
       </div>
diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts
index a91c19eda..7c61e816e 100644
--- a/registry/registry-ui.ts
+++ b/registry/registry-ui.ts
@@ -178,7 +178,8 @@ export const ui: Registry["items"] = [
     name: "pointer",
     type: "registry:ui",
     title: "Pointer",
-    description: "A component that displays a pointer when hovering over an element",
+    description:
+      "A component that displays a pointer when hovering over an element",
     dependencies: ["motion"],
     files: [
       {
@@ -186,7 +187,7 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
         target: "components/magicui/pointer.tsx",
       },
-    ]
+    ],
   },
   {
     name: "neon-gradient-card",

From 055dee0bf6f9f542c993e2cef6c286c6ecf7ac10 Mon Sep 17 00:00:00 2001
From: Dillion Verma <hello@dillion.io>
Date: Mon, 17 Feb 2025 04:38:09 -0500
Subject: [PATCH 3/6] fix: update pointer demo

---
 __registry__/index.tsx              |  50 +++
 public/r/pointer-demo-1.json        |  19 +
 public/r/pointer.json               |  18 +
 registry.json                       | 613 +++++++++++++++++++++-------
 registry/example/pointer-demo-1.tsx |  15 +-
 registry/magicui/pointer.tsx        |  57 +--
 6 files changed, 593 insertions(+), 179 deletions(-)
 create mode 100644 public/r/pointer-demo-1.json
 create mode 100644 public/r/pointer.json

diff --git a/__registry__/index.tsx b/__registry__/index.tsx
index 4002a371c..5bd8cb642 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,32 @@ 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/dot-pattern",
+      "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/public/r/pointer-demo-1.json b/public/r/pointer-demo-1.json
new file mode 100644
index 000000000..37805e8b2
--- /dev/null
+++ b/public/r/pointer-demo-1.json
@@ -0,0 +1,19 @@
+{
+  "$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/dot-pattern",
+    "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..64802839a 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,31 @@
         }
       ]
     },
+    {
+      "name": "pointer-demo-1",
+      "type": "registry:example",
+      "title": "Pointer Demo 1",
+      "description": "Example showing a pointer effect component",
+      "registryDependencies": [
+        "https://magicui.design/r/dot-pattern",
+        "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 +1691,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 +1712,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 +1733,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 +1754,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 +1775,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 +1796,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 +1817,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 +1838,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 +1859,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 +1880,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 +1901,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 +1922,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 +1943,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 +1964,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 +1985,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 +2006,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 +2027,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 +2048,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 +2069,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 +2090,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 +2111,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 +2132,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 +2186,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 +2210,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 +2231,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 +2252,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 +2273,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 +2294,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 +2315,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 +2339,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 +2426,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 +2517,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 +2541,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 +2562,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 +2583,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 +2604,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 +2625,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 +2646,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 +2670,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 +2694,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 +2724,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 +2745,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 +2766,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 +2787,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 +2808,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 +2829,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 +2871,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 +2892,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 +2913,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 +2934,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 +2955,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 +2976,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 +2997,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 +3018,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 +3039,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 +3060,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 +3081,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 +3102,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 +3123,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 +3144,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 +3165,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 +3186,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 +3228,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 +3249,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 +3270,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 +3291,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 +3312,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 +3333,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 +3354,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 +3375,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 +3396,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 +3417,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 +3459,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 +3480,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 +3501,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 +3522,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 +3543,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 +3564,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 +3585,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 +3606,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 +3627,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 +3648,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 +3669,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 +3690,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 +3711,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 +3732,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 +3753,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 +3795,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 +3814,10 @@
     {
       "name": "utils",
       "type": "registry:lib",
-      "dependencies": ["clsx", "tailwind-merge"],
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
       "files": [
         {
           "path": "registry/lib/utils.ts",
@@ -3501,4 +3826,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/registry/example/pointer-demo-1.tsx b/registry/example/pointer-demo-1.tsx
index c54fde359..bccc548d0 100644
--- a/registry/example/pointer-demo-1.tsx
+++ b/registry/example/pointer-demo-1.tsx
@@ -1,21 +1,14 @@
 "use client";
 
 import { PointerWrapper } from "@/registry/magicui/pointer";
-import { DotPattern } from "@/registry/magicui/dot-pattern";
-import { cn } from "@/lib/utils";
 
 export default function PointerDemo1() {
   return (
-    <PointerWrapper className="w-full">
-      <div className="relative h-[500px] w-full flex items-center justify-center overflow-hidden rounded-lg border bg-background">
-        <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white">
+    <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
-        </p>
-        <DotPattern
-          className={cn(
-            "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]",
-          )}
-        />
+        </span>
       </div>
     </PointerWrapper>
   );
diff --git a/registry/magicui/pointer.tsx b/registry/magicui/pointer.tsx
index 8eccb603d..5abb1cc11 100644
--- a/registry/magicui/pointer.tsx
+++ b/registry/magicui/pointer.tsx
@@ -1,18 +1,14 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
-
-import { AnimatePresence, motion, useMotionValue } from "motion/react";
-
 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
- * @property {string} [className] - Optional CSS classes to be applied to the wrapper
  */
-interface PointerWrapperProps {
-  children: React.ReactNode;
-  className?: string;
+interface PointerWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
 }
 
 /**
@@ -22,7 +18,11 @@ interface PointerWrapperProps {
  * @component
  * @param {PointerWrapperProps} props - The component props
  */
-export function PointerWrapper({ children, className }: PointerWrapperProps) {
+export function PointerWrapper({
+  children,
+  className,
+  ...props
+}: PointerWrapperProps) {
   const x = useMotionValue(0);
   const y = useMotionValue(0);
 
@@ -31,18 +31,27 @@ export function PointerWrapper({ children, className }: PointerWrapperProps) {
   const [isInside, setIsInside] = useState<boolean>(false);
 
   useEffect(() => {
-    if (ref.current) {
-      setRect(ref.current.getBoundingClientRect());
+    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) {
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-
-      x.set(e.clientX - rect.left + scrollX);
-      y.set(e.clientY - rect.top + scrollY);
+      x.set(e.clientX - rect.left);
+      y.set(e.clientY - rect.top);
     }
   }
 
@@ -51,19 +60,20 @@ export function PointerWrapper({ children, className }: PointerWrapperProps) {
   }
 
   function handleMouseEnter() {
-    setIsInside(true);
+    if (ref.current) {
+      setRect(ref.current.getBoundingClientRect());
+      setIsInside(true);
+    }
   }
 
   return (
     <div
-      className={cn("relative", className)}
       ref={ref}
-      style={{
-        cursor: "none",
-      }}
+      className={cn("relative cursor-none", className)}
       onMouseLeave={handleMouseLeave}
       onMouseEnter={handleMouseEnter}
       onMouseMove={handleMouseMove}
+      {...props}
     >
       <AnimatePresence>{isInside && <Pointer x={x} y={y} />}</AnimatePresence>
       {children}
@@ -91,11 +101,10 @@ interface PointerProps {
 function Pointer({ x, y }: PointerProps): JSX.Element {
   return (
     <motion.div
-      className="h-4 w-4 rounded-full absolute z-50"
+      className="pointer-events-none absolute z-50 h-4 w-4 rounded-full"
       style={{
         top: y,
         left: x,
-        pointerEvents: "none",
       }}
       initial={{
         scale: 1,
@@ -115,7 +124,7 @@ function Pointer({ x, y }: PointerProps): JSX.Element {
         fill="currentColor"
         strokeWidth="1"
         viewBox="0 0 16 16"
-        className="h-6 w-6 text-black transform -rotate-[70deg] -translate-x-[12px] -translate-y-[10px] stroke-white"
+        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"

From 6a83361edc4c192265e149bc8c6ba9e9cd81bead Mon Sep 17 00:00:00 2001
From: Dillion Verma <hello@dillion.io>
Date: Mon, 17 Feb 2025 04:39:31 -0500
Subject: [PATCH 4/6] fix: bump


From 8c95293711ea4199638499b127c0ee9b21789618 Mon Sep 17 00:00:00 2001
From: Dillion Verma <hello@dillion.io>
Date: Mon, 17 Feb 2025 04:40:55 -0500
Subject: [PATCH 5/6] fix: update registry

---
 __registry__/index.tsx        | 5 +----
 public/r/pointer-demo-1.json  | 1 -
 registry.json                 | 1 -
 registry/registry-examples.ts | 5 +----
 4 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/__registry__/index.tsx b/__registry__/index.tsx
index 5bd8cb642..9aa066096 100644
--- a/__registry__/index.tsx
+++ b/__registry__/index.tsx
@@ -1867,10 +1867,7 @@ export const Index: Record<string, any> = {
     name: "pointer-demo-1",
     description: "Example showing a pointer effect component",
     type: "registry:example",
-    registryDependencies: [
-      "https://magicui.design/r/dot-pattern",
-      "https://magicui.design/r/pointer",
-    ],
+    registryDependencies: ["https://magicui.design/r/pointer"],
     files: [
       {
         path: "registry/example/pointer-demo-1.tsx",
diff --git a/public/r/pointer-demo-1.json b/public/r/pointer-demo-1.json
index 37805e8b2..d4238e7c5 100644
--- a/public/r/pointer-demo-1.json
+++ b/public/r/pointer-demo-1.json
@@ -5,7 +5,6 @@
   "title": "Pointer Demo 1",
   "description": "Example showing a pointer effect component",
   "registryDependencies": [
-    "https://magicui.design/r/dot-pattern",
     "https://magicui.design/r/pointer"
   ],
   "files": [
diff --git a/registry.json b/registry.json
index 64802839a..84eacfbe0 100644
--- a/registry.json
+++ b/registry.json
@@ -1654,7 +1654,6 @@
       "title": "Pointer Demo 1",
       "description": "Example showing a pointer effect component",
       "registryDependencies": [
-        "https://magicui.design/r/dot-pattern",
         "https://magicui.design/r/pointer"
       ],
       "files": [
diff --git a/registry/registry-examples.ts b/registry/registry-examples.ts
index 5c887c5a6..1b4318f6b 100644
--- a/registry/registry-examples.ts
+++ b/registry/registry-examples.ts
@@ -231,10 +231,7 @@ export const examples: Registry["items"] = [
     type: "registry:example",
     title: "Pointer Demo 1",
     description: "Example showing a pointer effect component",
-    registryDependencies: [
-      "https://magicui.design/r/dot-pattern",
-      "https://magicui.design/r/pointer",
-    ],
+    registryDependencies: ["https://magicui.design/r/pointer"],
     files: [
       {
         path: "registry/example/pointer-demo-1.tsx",

From 5c12a38efea1f75024b49c1735b98a86677f60e6 Mon Sep 17 00:00:00 2001
From: Dillion Verma <hello@dillion.io>
Date: Mon, 17 Feb 2025 04:43:05 -0500
Subject: [PATCH 6/6] fix: update date

---
 content/docs/components/pointer.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components/pointer.mdx b/content/docs/components/pointer.mdx
index 702d874f9..d863fa2e6 100644
--- a/content/docs/components/pointer.mdx
+++ b/content/docs/components/pointer.mdx
@@ -1,6 +1,6 @@
 ---
 title: Pointer
-date: 2025-02-11
+date: 2025-02-17
 description: A component that displays a pointer when hovering over an element
 author: h3rmel
 published: true