Target Cursor

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

Open in

Installation

npm install gsap react

pnpm install gsap react

yarn add gsap react

bun add gsap react

'use client';

import { Button } from '@/components/ui/button';
import { TargetCursor } from '@/components/ui/target-cursor';

export default function TargetCursorDemo() {
  return (
    <div className="relative min-h-[400px] p-8">
      <TargetCursor
        spinDuration={2}
        hideDefaultCursor={true}
        parallaxOn={true}
      />

      <div className="mx-auto max-w-2xl space-y-8 text-center">
        <h1 className="text-foreground text-3xl font-bold md:text-4xl">
          Hover over the elements below
        </h1>

        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button className="cursor-target">Click me!</Button>
          <div className="cursor-target border-primary bg-secondary text-foreground flex h-20 w-40 items-center justify-center rounded-lg border-2">
            Hover target
          </div>
          <button
            type="button"
            className="cursor-target bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2"
          >
            Link target
          </button>
        </div>

        <p className="text-muted-foreground text-sm">
          Move your cursor over the elements above to see the custom cursor
          effect
        </p>
      </div>
    </div>
  );
}

'use client';import { Button } from '@/components/ui/button';import { TargetCursor } from '@/components/ui/target-cursor';export default function TargetCursorDemo() {  return (    <div className="relative min-h-[400px] p-8">      <TargetCursor        spinDuration={2}        hideDefaultCursor={true}        parallaxOn={true}      />      <div className="mx-auto max-w-2xl space-y-8 text-center">        <h1 className="text-foreground text-3xl font-bold md:text-4xl">          Hover over the elements below        </h1>        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">          <Button className="cursor-target">Click me!</Button>          <div className="cursor-target border-primary bg-secondary text-foreground flex h-20 w-40 items-center justify-center rounded-lg border-2">            Hover target          </div>          <button            type="button"            className="cursor-target bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2"          >            Link target          </button>        </div>        <p className="text-muted-foreground text-sm">          Move your cursor over the elements above to see the custom cursor          effect        </p>      </div>    </div>  );}

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