Magnetic Cursor Ecosystem

Installation

Architecture & Ecosystem

The `CustomCursor` isn't just a simple tracking dot—it's an entire ecosystem that listens for specific data attributes on elements throughout your application. This allows any component to instruct the cursor on how it should behave when hovered.

Triggering Contextual States

Add the following data attributes to any element in your app to morph the cursor dynamically:

| Attribute | Value | Result | | :--- | :--- | :--- | | `data-cursor="play"` | N/A | Morphs into a glowing "Play" icon. | | `data-cursor="view"` | N/A | Morphs into a magnifying glass "View" icon. | | `data-cursor="link"` | N/A | Morphs into an angled arrow link icon. | | `data-cursor-text="Label"` | string | Expands and displays the custom text label. |

Global Usage

For standard Next.js apps, mount the cursor globally in your root `layout.tsx`:

import { CustomCursor } from "@/components/creative/custom-cursor";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-black">
        <CustomCursor color="#a855f7" variant="dot" />
        {children}
      </body>
    </html>
  );
}

Note: We render the cursor inside the <MagneticCursorDemo /> container for this documentation, but in your actual application, you should mount it at the absolute top level of your DOM tree.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { MagneticCursor } from "@/components/creative/magnetic-cursor";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { MagneticCursor } from "@/components/creative/magnetic-cursor";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <MagneticCursor
      >
        <div>Content goes here</div>
      </MagneticCursor>
    </div>
  );
}