A custom animated cursor component with GSAP. Features spinning animation, corner tracking on hover, and parallax effects. Perfect for interactive websites.

Component not found

The component target-cursor-demo could not be found. Please check the name and try again.

Troubleshooting steps:

•If you are the developer, ensure the component is registered correctly in your component registry.
•Check for typos in the component name or import statement.
•If you are the user, please contact the developer to fix this issue.

Need help? Contact support

Installation

npm install gsap react

pnpm install gsap react

yarn add gsap react

bun add gsap react

// Failed to read source code for target-cursor-demo// Error: Component "target-cursor-demo" not found

Usage

import { TargetCursor } from "@/components/ui/target-cursor";

export default function MyComponent() {
  return (
    <div>
      <TargetCursor 
        spinDuration={2}
        hideDefaultCursor={true}
        parallaxOn={true}
      />
      
      <button className="cursor-target">Hover me!</button>
      <div className="cursor-target">Another target</div>
    </div>
  );
}

Features

🎯 Custom Cursor: Replaces default cursor with animated custom cursor
🔄 Spinning Animation: Continuous rotation animation when idle
📐 Corner Tracking: Corners expand to frame hovered elements
🎨 Parallax Effect: Smooth parallax movement of corners
📱 Mobile Detection: Automatically disabled on mobile devices
⚡ GSAP Powered: Smooth animations powered by GSAP
🎭 Click Animation: Scale animation on mouse down/up

Props

Prop	Type	Default	Description
`targetSelector`	`string`	`".cursor-target"`	CSS selector for target elements
`spinDuration`	`number`	`2`	Duration of spin animation in seconds
`hideDefaultCursor`	`boolean`	`true`	Hide the default browser cursor
`hoverDuration`	`number`	`0.2`	Duration of hover animation
`parallaxOn`	`boolean`	`true`	Enable parallax effect on corners

Examples

Basic Usage

<TargetCursor />
<button className="cursor-target">Hover me</button>

Custom Selector

<TargetCursor targetSelector=".my-custom-target" />
<div className="my-custom-target">Custom target</div>

Faster Spin

<TargetCursor spinDuration={1} />

Without Parallax

<TargetCursor parallaxOn={false} />

Keep Default Cursor

<TargetCursor hideDefaultCursor={false} />

Styling Targets

Add the cursor-target class (or your custom selector) to any element you want the cursor to interact with:

<button className="cursor-target">Button</button>
<div className="cursor-target">Div</div>
<a href="#" className="cursor-target">Link</a>

Mobile Support

The component automatically detects mobile devices and returns null to avoid conflicts with touch interactions. It checks for:

Touch screen capability
Screen size (≤768px)
User agent string

Target Cursor