Cursor Star Trail Script

A magical star trail that follows your cursor! This script creates beautiful stars that drift softly like fairy dust.

How to Install

Copy the code block below.
Paste it into your website's HTML, right before the closing </body> tag (or inside a custom HTML/Javascript widget in your blog's layout).

const style = document.createElement('style');
    style.textContent = `
      .magic-spark {
        position: absolute; pointer-events: none; font-size: 15px; user-select: none; line-height: 1; z-index: 99999;
        transition: transform 3.5s cubic-bezier(0.1, 0.4, 0.2, 1), opacity 3.5s ease-out;
        opacity: 1; transform: translate(-50%, -50%) scale(1);
      }
    `;
    document.head.appendChild(style);

document.addEventListener('mousemove', (e) => {
      const now = Date.now();
      if (now - lastMove > 60) { 
        createSpark(e.pageX, e.pageY);
        lastMove = now;
      }
    });

function createSpark(x, y) {
      const spark = document.createElement('div');
      spark.className = 'magic-spark';
      spark.innerHTML = '\u2605'; 
      spark.style.color = colors[Math.floor(Math.random() * colors.length)];
      spark.style.left = `${x + 5}px`;
      spark.style.top = `${y}px`;
      document.body.appendChild(spark);

const baseAngle = Math.PI; 
      const angleVar = (Math.PI / 180) * 20;   
      const angle = baseAngle + (Math.random() - 0.5) * angleVar;
      
      const distance = Math.random() * 50 + 30; 
      const moveX = Math.cos(angle) * distance;
      const moveY = Math.sin(angle) * distance; 
      const rotation = (Math.random() - 0.5) * 450;

requestAnimationFrame(() => {
        spark.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px)) scale(0.1) rotate(${rotation}deg)`;
        spark.style.opacity = '0';
      });

setTimeout(() => spark.remove(), 3500);
    }
  })();
</script>

How to Customize the Colors

Look at the very beginning of the script for this line:

const colors = ['#ff80c0', '#ff59ac', '#ff0080', '#ff3399', '#ff66cc', '#7ce7ff', '#b388ff', '#ffe0b2'];

Simply replace those HEX codes with your own color codes (e.g., #ffffff for white, #000000 for black, etc.).

You can add as many or as few colors as you want, just make sure they are enclosed in single quotes and separated by commas!

Click on "Read More" to see the effect!

淡い月 - Awaitsuki

7/9/26 - Cursor Star Trail Script

1 comment:

tags

Followers