Inverted Cursor

Component 296

About

A smooth, customizable React cursor component that replaces the native cursor with a circular, inverted color cursor. It smoothly follows the mouse pointer, hides when the cursor leaves the viewport, and supports adjustable size via props. Built with TypeScript, React hooks, and CSS blend modes for a modern interactive UI effect.

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

Code

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

Usage.tsx

"use client";

import { Cursor } from "@/components/ui/inverted-cursor";

export default function CursorDemoPage() {
  return (
    <div className="relative w-full h-screen overflow-hidden cursor-none">
      {/* Custom circular inverted color cursor */}
      <Cursor />

      {/* Main content centered vertically and horizontally */}
      <main className="flex items-center justify-center h-full">
        <h1 className="text-4xl font-extrabold select-none">
          Move your mouse
        </h1>
      </main>
    </div>
  );
}