Ajouter

Lorem ipsum

Lorem ipsum

Design

4 views

3 min

How to Create a Star Trail Cursor in Webflow

Learn how to create a cursor with a trail of colorful stars in Webflow using JavaScript.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create a cursor with a trail of colorful stars in Webflow.

Example

Move your mouse inside the area

✨ Move your mouse here
ParameterDefault valueDescription
COUNT12Number of stars in the trail
SIZE10Star size in pixels
COLORSPurple, pink, blue...Star colors

The script

Paste this script into the Footer code field of your CMS article. It runs automatically on the page.

(function() {
var COUNT = 12, SIZE = 10;
var COLORS = ['#a78bfa','#f472b6','#60a5fa','#34d399','#fbbf24'];
var stars = [];
for (var i = 0; i < COUNT; i++) {
var s = document.createElement('div');
s.style.cssText = 'position:fixed;pointer-events:none;border-radius:50%;z-index:9999;transition:opacity 0.3s;';
document.body.appendChild(s);
stars.push({ el: s, x: 0, y: 0 });
}
document.addEventListener('mousemove', function(e) {
var s = stars[Math.floor(Math.random() * COUNT)];
var color = COLORS[Math.floor(Math.random() * COLORS.length)];
var size = SIZE * (0.5 + Math.random() * 0.5);
s.el.style.cssText += 'width:'+size+'px;height:'+size+'px;background:'+color+';left:'+e.clientX+'px;top:'+e.clientY+'px;opacity:1;';
setTimeout(function() { s.el.style.opacity = '0'; }, 100);
});
})();

good to know

For an even more fun version, swap the round divs for star emojis ⭐ or custom SVGs. Change s.el.innerHTML = '⭐' and remove border-radius:50% from the cssText.

Conclusion

A subtle but eye-catching easter egg. Perfect for creative sites and portfolios. See also: create a custom cursor in Webflow.

Published on

You might be interested in these tutorials

Similar tutorials

SEO / GEO

5 min read

5 views

How to Set Up a Redirect in Webflow? (2026)

Updated on 19.12.2025 by Sandro DA SILVA

SEO / GEO

5 min read

5 views

Add structured data to your Webflow site?

Updated on 21.08.2025 by Sandro DA SILVA

No-code

5 min read

5 views

How to Obfuscate a Link in Webflow

Updated on 23.04.2025 by Sandro DA SILVA

Let’s f*****G GO !!

Ready to launch
Your business?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

You'll :heart: our collaboration...