SmokyGhostTrail Library Demo

A WebGL-based ghost cursor trail effect that can be applied to any DOM element

Basic Ghost Trail

Move your cursor here to see the ghost trail effect

Multiple Instances

Each box has its own independent ghost trail with different configurations:

Blue Ghost
Red Ghost
Green Ghost
Purple Ghost

Usage Example

// Basic usage
const ghostTrail = new SmokyGhostTrail('#my-element', {
    size: 0.1,
    tail: {
        dotsNumber: 25,
        spring: 1.4,
        friction: 0.3,
        gravity: 0
    },
    mainColor: "#FAFAFA",    // Light gray-white
    borderColor: "#3399CC",  // Blue
    isFlatColor: false
});

// Start the effect
ghostTrail.start();

// Update options dynamically
ghostTrail.updateOptions({
    size: 0.15,
    mainColor: "#FF8080"     // Light red
});

// Stop and clean up
ghostTrail.stop();
ghostTrail.destroy();