☰

Rainbow Cursor

Turn your cursor into a rainbow trail

  1. // ==UserScript==
  2. // @name         Rainbow Cursor
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Turn your cursor into a rainbow trail
  6. // @author       Jyomama28
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     
  14.     const cursor = document.createElement('div');
  15.     cursor.id = 'rainbow-cursor';
  16.     
  17.  
  18.     const trailCount = 20;
  19.     const trail = [];
  20.     
  21.     for (let i = 0; i < trailCount; i++) {
  22.         const dot = document.createElement('div');
  23.         dot.className = 'rainbow-trail-dot';
  24.         document.body.appendChild(dot);
  25.         trail.push({
  26.             element: dot,
  27.             x: 0,
  28.             y: 0
  29.         });
  30.     }
  31.     
  32.  
  33.     const style = document.createElement('style');
  34.     style.innerHTML = `
  35.         html, body {
  36.             cursor: none !important;
  37.         }
  38.         
  39.         #rainbow-cursor {
  40.             position: fixed;
  41.             pointer-events: none;
  42.             width: 10px;
  43.             height: 10px;
  44.             background: white;
  45.             border-radius: 50%;
  46.             box-shadow: 0 0 5px rgba(0,0,0,0.5);
  47.             z-index: 9999;
  48.             transform: translate(-50%, -50%);
  49.         }
  50.         
  51.         .rainbow-trail-dot {
  52.             position: fixed;
  53.             pointer-events: none;
  54.             width: 8px;
  55.             height: 8px;
  56.             border-radius: 50%;
  57.             z-index: 9998;
  58.             transform: translate(-50%, -50%);
  59.             opacity: 0.8;
  60.             transition: width 0.1s, height 0.1s;
  61.         }
  62.     `;
  63.     document.head.appendChild(style);
  64.     document.body.appendChild(cursor);
  65.     
  66.  
  67.     let mouseX = 0;
  68.     let mouseY = 0;
  69.     
  70.     document.addEventListener('mousemove', (e) => {
  71.         mouseX = e.clientX;
  72.         mouseY = e.clientY;
  73.         cursor.style.left = mouseX + 'px';
  74.         cursor.style.top = mouseY + 'px';
  75.     });
  76.     
  77.  
  78.     function updateTrail() {
  79.  
  80.         for (let i = trail.length - 1; i > 0; i--) {
  81.             trail[i].x = trail[i-1].x;
  82.             trail[i].y = trail[i-1].y;
  83.         }
  84.         
  85.  
  86.         trail[0].x = mouseX;
  87.         trail[0].y = mouseY;
  88.         
  89.  
  90.         trail.forEach((dot, index) => {
  91.  
  92.             const hue = (Date.now() / 20 + index * 10) % 360;
  93.             
  94.  
  95.             dot.element.style.left = dot.x + 'px';
  96.             dot.element.style.top = dot.y + 'px';
  97.             dot.element.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
  98.             
  99.  
  100.             const size = 8 - (index * 0.3);
  101.             if (size > 0) {
  102.                 dot.element.style.width = size + 'px';
  103.                 dot.element.style.height = size + 'px';
  104.                 dot.element.style.opacity = 1 - (index / trail.length);
  105.             }
  106.         });
  107.         
  108.         requestAnimationFrame(updateTrail);
  109.     }
  110.     
  111.     updateTrail();
  112.     
  113.  
  114.     window.addEventListener('blur', () => {
  115.         cursor.style.display = 'none';
  116.         trail.forEach(dot => {
  117.             dot.element.style.display = 'none';
  118.         });
  119.     });
  120.     
  121.     window.addEventListener('focus', () => {
  122.         cursor.style.display = 'block';
  123.         trail.forEach(dot => {
  124.             dot.element.style.display = 'block';
  125.         });
  126.     });
  127. })();