Custom Cursor
An interactive custom cursor component with multi-state support and throttled mouse tracking.
Installation
npx shadcn@latest add https://collabui.design/r/custom-cursor.jsonDemo
Edit Mode
Purple cursor
View Mode
Blue cursor
Select Mode
Green cursor
Comment Mode
Amber cursor
Move your cursor here
Different sections show different cursor states
Features
- Multi-state support: Different cursor states based on position (Edit, View, Select, Comment)
- Throttled tracking: Optimized performance with 60fps mouse tracking using Mantine hooks
- Customizable: Configure colors and labels for each cursor state
- Smooth animations: Natural cursor movement with proper positioning
Usage
After installation, you can use the component in your code:
import { CustomCursor, CustomCursorDemo } from "@/registry/default/blocks/custom-cursor/custom-cursor";
// Use the CustomCursor component
<CustomCursor x={100} y={100} label="User" color="#3b82f6" />
// Or use the full demo
<CustomCursorDemo />