Ghost Cursor Trail

A cute, animated ghost that follows your cursor with smooth animations and configurable options. Perfect for adding a playful touch to your website!

Try Live Demo View on GitHub

Interactive Demo

Move your mouse around to see the ghost in action! Try different configurations and controls below.

Ghost Inactive

Code Examples

Learn how to implement the Ghost Cursor Trail in your projects with these examples.

Basic Usage

Get started with the simplest implementation:

// Create and start a basic ghost
const ghost = new GhostCursorTrail();
ghost.start();

Custom Colors

Customize the ghost appearance with your brand colors:

// Colorful ghost with custom settings
const ghost = new GhostCursorTrail({
    ghostColor: '#ff6b6b',
    eyeColor: '#ffffff',
    scale: 1.2
});
ghost.start();

Performance Optimized

Fine-tune for optimal performance:

// Optimized for smooth performance
const ghost = new GhostCursorTrail({
    followSpeed: 15,
    velocityMultiplier: 6,
    scale: 0.8,
    autoStart: true
});

// Clean up when needed
window.addEventListener('beforeunload', () => {
    ghost.destroy();
});

Dynamic Updates

Change ghost properties on the fly:

// Update ghost configuration dynamically
ghost.updateConfig({
    ghostColor: '#4ecdc4',
    scale: 1.5,
    followSpeed: 8
});

// Check if ghost is running
if (ghost.isRunning()) {
    console.log('Ghost is active!');
}

API Reference

Complete reference for all available methods and configuration options.

Constructor Options

new GhostCursorTrail({
    container: document.body,
    ghostColor: '#ffffff',
    eyeColor: '#161616',
    scale: 0.7,
    followSpeed: 10,
    velocityMultiplier: 8,
    zIndex: 9999,
    responsive: true,
    autoStart: false
});

Control Methods

// Start the ghost animation
ghost.start();

// Stop the animation
ghost.stop();

// Completely remove ghost
ghost.destroy();

// Check if running
ghost.isRunning();

Configuration

// Update settings
ghost.updateConfig({
    ghostColor: '#ff6b6b',
    scale: 1.2
});

// Get current config
const config = ghost.getConfig();
console.log(config);

Installation

Direct Download

// 1. Download files from GitHub repository
// 2. Include in your HTML:
<link rel="stylesheet" href="path/to/ghost-cursor-trail.css">
<script src="path/to/ghost-cursor-trail.js"></script>

Repository Clone

git clone https://github.com/jakaria-istauk/ghost-cursor-trail.git

// Copy files to your project:
// - ghost-cursor-trail.css
// - ghost-cursor-trail.js (or .min.js)

Features

🎨 Customizable

Change colors, size, speed, and behavior to match your design. Support for hexadecimal colors and real-time updates.

📱 Touch Support

Works seamlessly on mobile devices with touch events. Responsive design adapts to different screen sizes.

⚡ Performance

Optimized animations using requestAnimationFrame and CSS transforms for smooth 60fps performance.

🧹 Clean API

Simple, intuitive methods for starting, stopping, and configuring the ghost. Proper cleanup and memory management.

📦 Modular

Works with CommonJS, AMD, and global scope. Easy integration into any project or framework.

♿ Accessible

Respects user preferences for reduced motion and includes proper semantic HTML structure.

Browser Support

Compatible with all modern browsers and devices.

Desktop Browsers

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

Mobile Support

  • iOS Safari 12+
  • Chrome Mobile 60+
  • Samsung Internet 8+
  • Touch events supported