Custom Cursor

Heroes 40

About

• Smooth cursor movement using spring • Configurable cursor variants "customCursorVariants" • Change cursor variant and text with "useSetCursorVariant()" hook • Change variant with "setCursorVariant()" • Change text with "setCursorText()"

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

Code

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

Usage.tsx

"use client"

import { Button } from "@/components/ui/button"
import { CustomCursor, useSetCursorVariant } from "@/components/ui/custom-cursor"

export function CustomCursorDemo () {
    const { cursorVariant, setCursorVariant, cursorText, setCursorText } = useSetCursorVariant()

    return (
    <>
      <CustomCursor variant={cursorVariant} text={cursorText} />

      <div className="bg-zinc-900 px-6 py-12 md:px-8 xl:px-12">
        <div className="md:grid-cols-2 grid grid-cols-1 grid-flow-row items-center gap-8">
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-4">
              <h1 className="text-5xl font-medium text-white">
                Crafting{" "}
                <span className="text-teal-500">Digital Experiences</span>{" "}
                Through Design
              </h1>
              <p className="tracking-tight text-muted/80">
                Leading web design agency, dedicated to crafting exceptional
                online experiences for businisses worldwide with passion for
                crativity and a commitment to excellence, We specialize in
                transforming visions into reality.
              </p>
            </div>
            <div className="my-8">
              <Button
                onMouseEnter={() => setCursorVariant("sm")}
                onMouseLeave={() => setCursorVariant("default")}
                className="rounded-full"
                size="lg"
                variant={"secondary"}
              >
                Start your project
              </Button>
            </div>
          </div>
          <div
            className="aspect-square rounded-md bg-muted size-40 md:size-auto"
            onMouseEnter={() => setCursorText("View Project")}
            onMouseLeave={() => setCursorText("")}
          />
        </div>
      </div>
    </>
  )
}