Cursor

Component 11

About

A custom animated mouse cursor with a velocity-tilted pointer and a spring-following tooltip label, for adding a playful pointer effect to a hoverable area or the whole page.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cursor to your project and fits it to your theme.

Code

How Cursor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Cursor,
  CursorFollow,
  CursorProvider,
  type CursorFollowProps,
} from "@/components/ui/cursor";

interface CursorDemoProps {
  global?: boolean;
  enableCursor?: boolean;
  enableCursorFollow?: boolean;
  side?: CursorFollowProps["side"];
  sideOffset?: number;
  align?: CursorFollowProps["align"];
  alignOffset?: number;
}

const CursorDemo = ({
  global = false,
  enableCursor = true,
  enableCursorFollow = true,
  side = "bottom",
  sideOffset = 15,
  align = "end",
  alignOffset = 5,
}: CursorDemoProps) => {
  return (
    <div
      key={String(global)}
      className="max-w-[400px] h-[400px] w-full bg-accent rounded-lg flex items-center justify-center"
    >
      <p className="font-medium italic text-muted-foreground">
        Move your mouse over the div
      </p>
      <CursorProvider global={global}>
        {enableCursor && <Cursor />}
        {enableCursorFollow && (
          <CursorFollow
            side={side}
            sideOffset={sideOffset}
            align={align}
            alignOffset={alignOffset}
          >
            Designer
          </CursorFollow>
        )}
      </CursorProvider>
    </div>
  );
};

export default function DemoCursor() {
  return <CursorDemo />;
}