MagneticCursor

Custom cursor that follows the pointer and grows on interactive elements. Auto-disables on touch devices.

Toggle the cursor and move around the page. It grows when hovering any link or button.

Usage

// Mount once at the root of your app.
import { MagneticCursor } from '@bwo-ui/react';

export default function Layout({ children }) {
  return (
    <>
      <MagneticCursor color="#ff481f" hoverSize={48} />
      {children}
    </>
  );
}

Props: size, hoverSize, color, hoverColor, duration, hoverSelector, hideNativeCursor.

By default, the cursor grows on a, button, [role="button"], and any element with the data-magnetic-cursor attribute.