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
| Parameter | Default value | Description |
|---|---|---|
| COUNT | 12 | Number of stars in the trail |
| SIZE | 10 | Star size in pixels |
| COLORS | Purple, 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);
});
})();Conclusion
A subtle but eye-catching easter egg. Perfect for creative sites and portfolios. See also: create a custom cursor in Webflow.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.














