Documentation

Installation

No installation required! All cursors are pure vanilla JavaScript with zero dependencies.

<!-- Simply copy the HTML, CSS, and JS code -->
<!-- No npm install needed! -->

Quick Start

Get started in 3 simple steps:

1. Choose a cursor from the homepage
2. Click "Code" to view implementation
3. Copy & paste into your project

Basic Usage

Each cursor consists of three parts:

1. HTML Structure

<!-- Add before closing </body> tag -->
<div id="cursor-dot"></div>
<div id="cursor-ring"></div>

2. CSS Styling

body { cursor: none; }

#cursor-dot {
  position: fixed;
  width: 10px;
  height: 10px;
  background: #60a5fa;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
}

3. JavaScript Logic

const dot = document.getElementById('cursor-dot');

document.addEventListener('mousemove', e => {
  dot.style.left = e.clientX + 'px';
  dot.style.top = e.clientY + 'px';
});

Dot + Ring

A classic two-part cursor with a small dot and a smooth following ring. Perfect for modern, minimal designs.

Features

• Smooth lag effect on the ring for natural movement
• Scales up on hover over interactive elements
• Lightweight and performant
• Easy to customize colors and sizes

Best For

Portfolio websites, landing pages, creative agencies, and modern web applications.

Glow Orb

A glowing orb with a radial gradient and blur effect that creates an ethereal, futuristic look.

Features

• Radial gradient with customizable colors
• CSS blur filter for soft glow effect
• Smooth transitions and animations
• Expands on hover over clickable elements

Best For

Tech startups, SaaS products, gaming websites, and futuristic designs.

Magnetic Snap

An interactive cursor that magnetically snaps to buttons and links, creating an engaging user experience.

Features

• Automatically detects interactive elements
• Smooth magnetic pull effect
• Customizable snap distance and strength
• Works with buttons, links, and custom elements

Best For

Interactive portfolios, product showcases, and websites with prominent CTAs.

Customization

// Adjust magnetic strength
const magneticStrength = 0.3; // 0.1 to 0.5

// Change snap distance
const snapDistance = 100; // pixels

Crosshair

A precision crosshair cursor with horizontal and vertical lines, perfect for gaming or technical interfaces.

Features

• Full-width and full-height crosshair lines
• Central dot for precise targeting
• Customizable line thickness and color
• Optional opacity and blur effects

Best For

Gaming websites, design tools, photo editors, and technical applications.

Particle Trail

A dynamic cursor that leaves a trail of particles behind, creating a magical, interactive effect.

Features

• Animated particles with fade-out effect
• Customizable particle count and lifetime
• Multiple color options
• Optimized for performance

Best For

Creative portfolios, art galleries, entertainment sites, and playful designs.

Performance Note

Limit particle count to 10-15 for optimal performance. Use requestAnimationFrame for smooth animations.

Morphing Blob

An organic, shape-shifting cursor that morphs and changes as you move, creating a fluid, dynamic effect.

Features

• SVG-based morphing animation
• Smooth transitions between shapes
• Customizable colors and sizes
• Responds to movement speed

Best For

Experimental designs, creative agencies, art projects, and unique brand experiences.

Customization

Easily customize colors, sizes, and animations for any cursor:

Change Colors

:root {
  --cursor-color: #60a5fa; /* Your brand color */
}

#cursor-dot {
  background: var(--cursor-color);
}

Adjust Size

#cursor-dot {
  width: 12px;  /* Increase size */
  height: 12px;
}

#cursor-ring {
  width: 40px;  /* Larger ring */
  height: 40px;
}

Modify Animation Speed

/* CSS transition speed */
#cursor-ring {
  transition: all 0.15s ease-out; /* Faster */
}

/* JavaScript lag effect */
const lag = 0.1; // Lower = faster, Higher = slower

React Integration

Use cursors in React applications:

import { useEffect, useRef } from 'react';

export function CustomCursor() {
  const dotRef = useRef(null);
  
  useEffect(() => {
    const handleMove = (e) => {
      if (dotRef.current) {
        dotRef.current.style.left = e.clientX + 'px';
        dotRef.current.style.top = e.clientY + 'px';
      }
    };
    
    document.addEventListener('mousemove', handleMove);
    return () => document.removeEventListener('mousemove', handleMove);
  }, []);
  
  return (
    <div 
      ref={dotRef}
      style={{
        position: 'fixed',
        width: '10px',
        height: '10px',
        background: '#60a5fa',
        borderRadius: '50%',
        pointerEvents: 'none',
        zIndex: 99999,
        transform: 'translate(-50%, -50%)'
      }}
    />
  );
}

Performance Tips

• Use requestAnimationFrame for smooth animations
• Disable on mobile devices (no mouse cursor)
• Use CSS transforms instead of top/left for better performance
• Limit particle count in trail effects (max 10-15)
• Use pointer-events: none on cursor elements

Browser Support

All cursors work in modern browsers:

FAQ