☰

Mouse Trail

Add a mouse trail effect with an image to any website

  1. // ==UserScript==
  2. // @name         Mouse Trail
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Add a mouse trail effect with an image to any website
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Image URL for the mouse trail
  15.     const imageUrl = 'https://cdn.creazilla.com/emojis/42013/grinning-face-with-smiling-eyes-emoji-clipart-lg.png'; // Replace with your image URL
  16.  
  17.     // Trail settings
  18.     const trailSize = 25; // Size of each trail image (width and height)
  19.     const trailDuration = 300; // Time in ms for how long each trail image lasts
  20.  
  21.     // Create a container for each trail image
  22.     function createTrailImage(x, y) {
  23.         const trailImage = document.createElement('img');
  24.         trailImage.src = imageUrl; // Set image URL
  25.         trailImage.style.position = 'absolute';
  26.         trailImage.style.width = `${trailSize}px`;
  27.         trailImage.style.height = `${trailSize}px`;
  28.         trailImage.style.left = `${x - trailSize / 2}px`; // Center image on the cursor
  29.         trailImage.style.top = `${y - trailSize / 2}px`; // Center image on the cursor
  30.         trailImage.style.pointerEvents = 'none'; // Don't allow interaction with the trail image
  31.         trailImage.style.zIndex = '9999'; // Ensure it's above most content
  32.         trailImage.style.transition = 'transform 0.1s ease-out'; // Smooth transition effect
  33.  
  34.         // Append to the body
  35.         document.body.appendChild(trailImage);
  36.  
  37.         // Remove the trail image after the specified duration
  38.         setTimeout(() => {
  39.             trailImage.remove();
  40.         }, trailDuration);
  41.     }
  42.  
  43.     // Update trail image on mouse movement
  44.     document.addEventListener('mousemove', (e) => {
  45.         const mouseX = e.pageX;
  46.         const mouseY = e.pageY;
  47.         createTrailImage(mouseX, mouseY);
  48.     });
  49. })();