Tron-Style Glowing Cursor Trail with Canvas

1.class TrailSegment {
2.  constructor(x, y) {
3.    this.x = x;
4.    this.y = y;
5.    this.life = 1; // Full opacity
6.  }
7.
8.  update() {
9.    this.life -= 0.005; // Fade out speed
10.    return this.life > 0; // Remove when dead
11.  }
12.}
13.
14.const trailPoints = [];
15.const maxTrailPoints = 100;
16.
17.// Add new point on mouse move
18.canvas.addEventListener('mousemove', (e) => {
19.  const rect = canvas.getBoundingClientRect();
20.  const x = e.clientX - rect.left;
21.  const y = e.clientY - rect.top;
22.
23.  trailPoints.push(new TrailSegment(x, y));
24.  if (trailPoints.length > maxTrailPoints) {
25.    trailPoints.shift();
26.  }
27.});

1.// Draw connected trail segments
2.for (let i = 0; i < trailPoints.length - 1; i++) {
3.  const point = trailPoints[i];
4.  const nextPoint = trailPoints[i + 1];
5.  const alpha = point.life;
6.
7.  // Outer glow layer
8.  ctx.strokeStyle = `rgba(${glowRGB[0]}, ${glowRGB[1]}, ${glowRGB[2]}, ${alpha * 0.3})`;
9.  ctx.lineWidth = 12;
10.  ctx.shadowBlur = 20;
11.  ctx.shadowColor = glowColor;
12.
13.  ctx.beginPath();
14.  ctx.moveTo(point.x, point.y);
15.  ctx.lineTo(nextPoint.x, nextPoint.y);
16.  ctx.stroke();
17.
18.  // Inner solid line
19.  ctx.strokeStyle = `rgba(${glowRGB[0]}, ${glowRGB[1]}, ${glowRGB[2]}, ${alpha})`;
20.  ctx.lineWidth = 6;
21.  ctx.shadowBlur = 10;
22.
23.  ctx.beginPath();
24.  ctx.moveTo(point.x, point.y);
25.  ctx.lineTo(nextPoint.x, nextPoint.y);
26.  ctx.stroke();
27.}

1.const gridSize = 50;
2.
3.function drawGrid() {
4.  ctx.strokeStyle = '#00ffff';
5.  ctx.lineWidth = 1;
6.  ctx.globalAlpha = 0.3;
7.
8.  // Vertical lines
9.  for (let x = 0; x < canvas.width; x += gridSize) {
10.    ctx.beginPath();
11.    ctx.moveTo(x, 0);
12.    ctx.lineTo(x, canvas.height);
13.    ctx.stroke();
14.  }
15.
16.  // Horizontal lines
17.  for (let y = 0; y < canvas.height; y += gridSize) {
18.    ctx.beginPath();
19.    ctx.moveTo(0, y);
20.    ctx.lineTo(canvas.width, y);
21.    ctx.stroke();
22.  }
23.
24.  ctx.globalAlpha = 1;
25.}

1.const colors = [
2.  { name: 'Orange', hex: '#ff6b1a', rgb: [255, 107, 26] },
3.  { name: 'Cyan', hex: '#00ffff', rgb: [0, 255, 255] },
4.  { name: 'Pink', hex: '#ff00ff', rgb: [255, 0, 255] },
5.  { name: 'Green', hex: '#00ff00', rgb: [0, 255, 0] },
6.  { name: 'Purple', hex: '#9d00ff', rgb: [157, 0, 255] },
7.];
8.
9.let currentColorIndex = 0;
10.let glowColor = colors[currentColorIndex].hex;
11.let glowRGB = colors[currentColorIndex].rgb;

1.function animate() {
2.  // Clear canvas
3.  ctx.fillStyle = '#000000';
4.  ctx.fillRect(0, 0, canvas.width, canvas.height);
5.
6.  // Draw grid
7.  drawGrid();
8.
9.  // Update trail points (remove dead ones)
10.  for (let i = trailPoints.length - 1; i >= 0; i--) {
11.    if (!trailPoints[i].update()) {
12.      trailPoints.splice(i, 1);
13.    }
14.  }
15.
16.  // Draw trail
17.  drawTrail();
18.
19.  // Loop
20.  requestAnimationFrame(animate);
21.}
22.
23.animate();