You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewCanvas Rainbow Mouse Trail — Free Hue-Cycling Cursor Snippet
Canvas Rainbow Mouse Trail · Animations · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Canvas Rainbow Mouse Trail — A Cursor Trail That Cycles Through Hue
The rainbow mouse trail snippet leaves a stream of small, glowing particles behind your cursor, each one colored a little further along the color wheel than the last — so a slow, looping cursor movement paints a visible rainbow across the panel over a few seconds. It's built entirely with the Canvas 2D API and a single incrementing hue counter, no gradient or color library needed.
A single global hue counter, advanced on every move
Rather than picking a random or fixed color, one shared hue variable increments by a small amount (2.5) every time spawn() runs, wrapping around at 360 with the modulo operator. Every particle spawned in that call captures the *current* value of hue at creation time, so particles created moments apart carry visibly different, but adjacent, hues — that continuity across time is what makes the trail read as a smooth rainbow gradient rather than random flickering colors.
HSL makes hue-cycling trivial
Colors are expressed as hsla(hue, 95%, 65%, alpha) instead of RGB or hex. Because hue in HSL is a single 0-360 value representing position on the color wheel, cycling through the entire spectrum is just incrementing one number — RGB would require interpolating three channels in a coordinated way to achieve the same effect.
Short-lived particles, not a persistent line
Each particle has its own life value that decays every frame, shrinking its radius and fading its alpha in step (Math.max(p.life, 0) used for both) until it's removed. Because the canvas is fully cleared and redrawn each frame rather than using a fade-overlay trick, only currently-alive particles are visible — the trail's length is a direct function of the particle lifespan and how fast you're moving, not a fixed-length line of points.
Small random jitter and drift
Each spawned particle gets a slightly randomized starting offset and initial velocity, plus a small constant gravity-like pull (p.vy += 0.01), so the trail has a soft, organic scatter rather than particles stacking in a perfectly straight line behind the cursor.
Customizing it
Change the hue increment for a faster or slower color cycle, adjust particle lifespan for a longer or shorter trail, or swap the gravity pull for an upward drift. Pair it with canvas fluid cursor trail for a different trail texture, or particle network and starfield for other ambient canvas backgrounds.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain why a single incrementing hue variable captured per-particle at spawn time produces a smooth color gradient across the trail, and why HSL color makes that cycling trivial compared to RGB. It's also a good snippet to extend — ask for a version where hue increments based on cursor speed instead of a fixed per-move amount, a toggle between hue-cycling and a fixed color palette, or combining the particle motion with the stretch/blend technique from a fluid-style trail for a hybrid look. Use the conversation to build a solid mental model of HSL-based color cycling so you can apply it elsewhere.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a "rainbow mouse trail" effect in plain HTML, CSS, and JavaScript using only the Canvas 2D API — no external libraries or CDNs.
Requirements:
- A canvas panel that tracks mouse and touch movement within its bounds and spawns a small number of particles at the pointer position on every move event.
- Maintain a single shared hue value (0 to 360) that increments by a small fixed amount every time particles are spawned, wrapping around with the modulo operator once it exceeds 360. Each particle must capture the current hue value at the moment it's created and keep it for its whole lifetime, so particles spawned at different times end up with different, but adjacent, hues.
- Use HSL (hsla()) color strings for particles so the color cycling is expressed as a single changing hue number rather than manipulating RGB channels directly.
- Give each particle its own randomized starting offset and initial velocity (small jitter) plus a slight constant downward drift applied every frame, so the trail looks organically scattered rather than a perfectly straight line of points following the cursor.
- Give each particle a lifespan that decays every frame, and derive both its rendered radius and its opacity from that same decaying lifespan value so it shrinks and fades together, removing it from the active particle list once its life reaches zero.
- Fully clear and redraw the canvas each animation frame (do not use a persistent fade-overlay trick) so trail length is naturally governed by particle lifespan and cursor movement speed.
- Stop spawning new particles when the pointer leaves the canvas, and make the canvas device-pixel-ratio aware with correct resize handling.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSA canvas panel and hint text render.
- 2Move the cursor over the panelSmall particles spawn, cycling through hue.
- 3Move slowly in a loopYou can trace a visible rainbow across the panel.
- 4Hold stillThe existing trail fades out and no new particles spawn.
- 5Leave the panelThe cursor dot disappears and spawning stops.
- 6Resize the windowThe canvas adapts to the new panel size.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
A single shared hue variable increments by a small fixed amount every time the spawn function runs, wrapping at 360 using the modulo operator. Every particle created in that call captures whatever the hue variable currently is, so particles spawned moments apart get adjacent hues, producing a smooth, continuous gradient across the trail rather than randomly assigned colors.
In HSL, hue is a single value from 0 to 360 representing a position on the color wheel, so cycling through every color is just incrementing one number. Achieving the same continuous rainbow sweep in RGB would require coordinating three separate channel values through a color wheel conversion, which is unnecessary complexity when HSL does it natively.
Each particle carries its own life value that decays a fixed amount every frame, and both its radius and opacity are derived from that same decaying value. Once life reaches zero the particle is filtered out of the array. Because the canvas is fully cleared and redrawn each frame, only currently-alive particles are visible, so trail length is governed by lifespan and cursor speed, not a fixed-length point buffer.
Each particle is spawned with a small randomized position offset and a randomized initial velocity, plus a constant small downward pull applied every frame. That combination gives the trail a soft, organic scatter and drift rather than particles stacking in a rigid single-file line directly behind the pointer.
Move the canvas setup, pointer listeners, and animation loop into a mount effect scoped to a canvas ref, keeping the particles array and hue counter in refs rather than component state so they persist without triggering re-renders. Cancel the requestAnimationFrame loop and remove event listeners in the cleanup function.