☰

Useless Things Series: The Line

Adds a fading line mouse tail at the top of webpages

  1. // ==UserScript==
  2. // @name         Useless Things Series: The Line
  3. // @version      1.2
  4. // @description  Adds a fading line mouse tail at the top of webpages
  5. // @match        *://*/*
  6. // @grant        none
  7. // @license      MIT
  8. // @namespace    https://greasyfork.org/users/1126616
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.   'use strict';
  13.  
  14.   const tail = createTail();
  15.  
  16.   document.body.appendChild(tail);
  17.  
  18.   function createTail() {
  19.     const tailElement = document.createElement('div');
  20.     tailElement.style.position = 'fixed';
  21.     tailElement.style.top = '0';
  22.     tailElement.style.left = '0';
  23.     tailElement.style.width = '0';
  24.     tailElement.style.height = '4px';
  25.     tailElement.style.opacity = '1';
  26.     tailElement.style.transition = 'width 0.3s linear, opacity 1s ease-out';
  27.     return tailElement;
  28.   }
  29.  
  30.   function updateTail(event) {
  31.     const mouseX = event.clientX;
  32.     const mouseY = event.clientY;
  33.  
  34.     tail.style.width = mouseX + 'px';
  35.     tail.style.opacity = '1';
  36.   }
  37.  
  38.   function fadeOutTail() {
  39.     tail.style.opacity = '0';
  40.   }
  41.  
  42.   function changeColor() {
  43.     const randomColor = getRandomColor();
  44.     tail.style.backgroundColor = randomColor;
  45.   }
  46.  
  47.   function getRandomColor() {
  48.     const letters = '0123456789ABCDEF';
  49.     let color = '#';
  50.     for (let i = 0; i < 6; i++) {
  51.       color += letters[Math.floor(Math.random() * 16)];
  52.     }
  53.     return color;
  54.   }
  55.  
  56.   function fadeInTail() {
  57.     tail.style.opacity = '1';
  58.     changeColor();
  59.   }
  60.  
  61.   document.addEventListener('mousemove', updateTail);
  62.  
  63.   let timeoutId;
  64.  
  65.   document.addEventListener('mousemove', function() {
  66.     clearTimeout(timeoutId);
  67.     timeoutId = setTimeout(fadeOutTail, 2000);
  68.   });
  69.  
  70.   document.addEventListener('mouseover', fadeInTail);
  71.  
  72. })();