← All effects
Cursor Trail
move your mouse inside — or let it draw by itself
-- fps
prefers-reduced-motion detected — trail disabled, plain cursor
X-ray · layers
tapered line through the points
particles falling off the tip
hue cycles — off = brand purple
Parameters
Trail length25
Thickness3 px
Spark rate6
Hue speed0.4
your version · updates as you tinker
How this effect works
The trail is a short memory of where the cursor has been. Every frame we push the current position into an array and drop the oldest once it exceeds LENGTH. The ribbon connects those points with line segments whose width and opacity shrink toward the tail — that taper alone turns a clumsy polyline into something that feels like silk.
The head of the trail doesn't sit exactly on the cursor — it chases it with a small lerp, which rounds off sharp corners into curves. The sparks layer spawns tiny particles at the head when you move fast (spawn rate scales with speed), each with its own small velocity and fade. The rainbow layer cycles the stroke hue over time and along the trail; switch it off and everything stays in brand purple.
Production notes: respects prefers-reduced-motion (no trail, regular cursor) · cost is trail length + live sparks — trivial · classic use: playful landing pages, portfolios, kids/game sites; skip it on text-heavy pages where it distracts · the copied snippet is self-contained HTML + JS covering the whole page.