Every hero ability needs a trail. This neon trail effect — each glowing dot fades from electric cyan to black with a motion-blur afterglow — is the exact visual pattern used for lightsabers, energy weapons, dash abilities, and sci-fi cursors in HTML5 games. Under 1 KB of vanilla JavaScript, zero libraries, perfect on touch via pointermove.
A glowing trail of 20 fading dots that follows the cursor with a staggered delay. Each dot is 10% smaller than the previous, colored with decreasing opacity. A semi-transparent background fill on each frame creates the motion-blur afterglow effect.
Neon mouse trail
How the JavaScript neon mouse trail works
Store the last 20 cursor positions in a ring buffer (a fixed-size array where new values overwrite the oldest). Each requestAnimationFrame tick: draw a rectangle over the whole canvas with alpha ~0.18—this creates the fade-out effect by partially erasing the previous frame rather than clearing it. Then iterate the buffer drawing each point as an arc with radius and opacity proportional to its index. Older points are smaller and more transparent.
The key technique is ctx.globalCompositeOperation = 'lighter' combined with low-alpha color values. This additive blending makes overlapping dots bloom brighter instead of stacking to a solid color, which creates the neon glow without any blur filter (blur filters are expensive on Canvas). The trail appears to emit light at the cursor tip and decay to darkness behind it.
points.push({ x, y, alpha: 1 });
ctx.globalCompositeOperation = 'lighter';
points.forEach((point, index) => {
point.alpha *= 0.965;
ctx.strokeStyle = `rgba(30, 200, 255, ${point.alpha})`;
});Two details carry the whole aesthetic: globalCompositeOperation = 'lighter' for additive glow, and alpha *= 0.965 per frame for the fade. Change the alpha multiplier to tune the trail length.
Why mouse trails still work in 2026
Mouse trails never went out of style—they just evolved. The 2000s version was a cheesy GIF overlay. The 2026 version is a compositing-mode Canvas animation under 1 KB that responds to both mouse and touch, respects prefers-reduced-motion, and can be layered over any content with pointer-events: none. Studios use them on agency sites and product launches to signal that every pixel is intentional.
This demo also teaches three transferable Canvas patterns: ring buffers for time-series data, partial-erase animation (vs. full clear) for motion blur, and additive blending for glow without blur filters. All three appear in game engines, data visualization libraries, and generative art tools.
20 arc draws per frame is trivially cheap. If you extend to 100+ trail points for a longer tail, batch the paths: call ctx.beginPath() once, chain all arc() calls, then ctx.fill() once. This reduces Canvas state-change overhead from O(n) to O(1).
Ways to extend this effect
Swap the cyan color for a rainbow gradient by cycling through HSL hues based on trail index. Add a splatter effect on click: burst 10 short-lived particles outward from the click point using the same ring-buffer pattern. Combine with the Three.js Tubes Cursor Trail post to see how a 3D version of the same idea looks with geometry.
Frequently asked questions
How do I make the trail follow touch on mobile?
The pointermove event fires for both mouse and touch on modern browsers. No separate touch handler is needed—just listen to canvas.addEventListener('pointermove', handler). Set touch-action: none on the canvas to prevent the browser from scrolling while the trail is active.
How do I change the trail color?
Replace the rgba(30, 200, 255, ...) value with any color. Use HSL for easy hue cycling: hsl(${180 + index * 3}, 100%, 60%) gives a rainbow trail that shifts color along its length. Keep alpha below 0.8 so the additive blending creates bloom rather than a solid stripe.
Related experiments
- JavaScript Particle Cursor Effect with Canvas
- JavaScript Magnetic Button Effect
- Three.js Particle Cursor Effect
Part of a weekly series on visual JavaScript, modern CSS, browser graphics, and HTML5 games—one live experiment per post, production-ready code snippets, and the reasoning behind each technique.
No comments:
Post a Comment