Loading
Interactive cursor animations for React & Next.js. Click any cursor below to try it live on this page.
Move your mouse over the boxes below to see how the Blob cursor behaves on different elements.
Step 1: Install dependencies
npm install clsx tailwind-merge tailwind-variants
Step 2: Create utility file
// utils/cn.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Step 3: Wrap your app
import { CursifyProvider } from "@/cursify";
export default function RootLayout({ children }) {
return (
<html>
<body>
<CursifyProvider>
{children}
</CursifyProvider>
</body>
</html>
);
}Step 4: Use any cursor
import { BlobCursor } from "@/cursify";
export default function Page() {
return <BlobCursor color="#4d65ff" size={24} />;
}Smooth and responsive cursor effects that react to user interactions.
Modular and maintainable components for efficient development.
Ready-to-use elements you can drop into any project.
Smooth animations without compromising performance.