Target Cursor

A custom cursor with targeting animation and corner tracking

Open in

Configuring your account...

Please wait while we prepare everything for you

Usage

import { useRef } from 'react';
import TargetCursor from './TargetCursor';

const Component = () => {
  const containerRef = useRef(null);

  return (
    <div ref={containerRef} style={{ height: '300px', overflow: 'hidden' }}>
      <TargetCursor 
        spinDuration={2}
        hideDefaultCursor={true}
        color="#ffffff"
      />
      
      <h1>Hover over the elements below</h1>
      <button className="cursor-target">Click me!</button>
      <div className="cursor-target">Hover target</div>
    </div>
  );
};

Props

PropTypeDefaultDescription
targetSelectorstring'.cursor-target'CSS selector for target elements
spinDurationnumber2Duration of the spin animation in seconds
hideDefaultCursorbooleantrueWhether to hide the default cursor
colorstring'#ffffff'Color of the cursor elements

CSS Classes

Add the cursor-target class to elements you want the cursor to target:

.cursor-target {
  /* Your element styles */
}