Cursor Follower
The Cursor component creates a customizable animated cursor that follows the user's mouse movement, with an interactive scaling effect based on the type of element being hovered over.
Installation
V3CN
pnpm dlx v3cn add cursor
Shadcn
pnpm dlx shadcn@latest add 'https://v3cn.vineet.pro/r/cursor'
Usage Examples
Default Usage
"use client";
import { Cursor } from "@/components/cursor";
// Add this in App.tsx
export default function Home() {
return (
<>
<Cursor />
<div className="flex justify-center items-center h-screen">
<h1>Hello</h1>
<p>This is a demo</p>
</div>
</>
);
}
When using compound components:
- Make sure that you have installed the dependencies and configured your project accordingly.
- Note: The code for the self-hosted API used to fetch contribution data is available here.
<Cursor Follower />
cursorClassstring
Default: " "
Additional tailwind CSS classes for customizing the cursor appearance and behavior.