Cursor trail generator
A trail behind the pointer, no library needed
Choose dots, a fading line, sparkles or bubbles, tune the colours and length, and copy a small, self-contained script and its CSS. Visitors who ask for reduced motion never see it.
Move your pointer around in here
Your system asks for reduced motion, so the preview is paused. The trail you copy stays off for visitors with the same setting.
Your code
Save as cursor-trail.js, load it with <script src="/cursor-trail.js" defer></script>, and add the CSS.
Adding the trail to your site
- Tune it here until the preview feels right. Length is the number of dots, or how many sparkles and bubbles can be on screen at once.
- Copy both parts. The CSS lays one canvas over the page that never catches clicks; the script draws on it. All in one gives a block to paste before
</body>. - Scope it if you like. Call
cursorTrail(options, element)to keep the trail inside one element.
Kind to visitors and batteries
Trails are decoration, and moving decoration bothers some people. The script checks prefers-reduced-motion and does nothing when it is set, and it stops if the setting changes while the page is open. It also sleeps when the pointer rests, skips touch by default, and uses no libraries, cookies or network requests.
Questions
Will the trail block clicks or text selection?
No. The canvas has pointer-events: none, so clicks go straight through to the page.
Does it work with a strict Content Security Policy?
Load it as a file from your own site: it uses no eval or inline handlers. The All in one block is an inline script, which a strict policy blocks.
How do I remove the trail again?
cursorTrail() returns a function that takes it away. Write const stopTrail = cursorTrail({…}) on the last line, then call stopTrail() to remove the canvas and its listeners.