Design

4 views

4 min

How to Create a Section-Based Themed Cursor Trail in Webflow

Learn how to create a cursor whose trail changes color depending on the section of the page in Webflow.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to create a cursor trail whose colors change depending on the section of the page in Webflow.

Example

Change the theme, then move your mouse in the area

Move your mouse here

Active theme: fire

Theme	Colors	Custom attribute
fire (default)	Orange, red, gold	data-cursor-theme='fire'
water	Blue, cyan, sky	data-cursor-theme='water'
nature	Green, emerald	data-cursor-theme='nature'

1. Add the attribute to your sections

On every Webflow section where you want a different theme, add the custom attribute data-cursor-theme with the value fire, water, or nature. The script automatically detects which section is centered on the screen.

2. Add the script in Footer code

(function() {
  if (!window.matchMedia('(pointer: fine)').matches) return;

  var COUNT = 15;
  var particles = [];
  var mouseX = 0, mouseY = 0;

  // Detect the active section to change the theme
  function getTheme() {
    var sections = document.querySelectorAll('[data-cursor-theme]');
    var active = 'fire';
    sections.forEach(function(s) {
      var rect = s.getBoundingClientRect();
      if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
        active = s.dataset.cursorTheme;
      }
    });
    return active;
  }

  var themes = {
    fire:  ['#ff4500','#ff6a00','#ffb347','#ff8c00','#ffd700'],
    water: ['#00bfff','#1e90ff','#87ceeb','#4169e1','#00ced1'],
    nature:['#22c55e','#4ade80','#86efac','#16a34a','#bbf7d0'],
  };

  for (var i = 0; i < COUNT; i++) {
    var p = document.createElement('div');
    p.style.cssText = 'position:fixed;pointer-events:none;border-radius:50%;z-index:9999;transition:opacity 0.4s;opacity:0;';
    document.body.appendChild(p);
    particles.push({ el: p, x: 0, y: 0, life: 0 });
  }

  document.addEventListener('mousemove', function(e) {
    mouseX = e.clientX; mouseY = e.clientY;
    var theme = getTheme();
    var colors = themes[theme] || themes.fire;
    var p = particles[Math.floor(Math.random() * COUNT)];
    var size = 6 + Math.random() * 8;
    var color = colors[Math.floor(Math.random() * colors.length)];
    p.el.style.width = size + 'px';
    p.el.style.height = size + 'px';
    p.el.style.background = color;
    p.el.style.left = mouseX + 'px';
    p.el.style.top = mouseY + 'px';
    p.el.style.opacity = '0.8';
    p.el.style.boxShadow = '0 0 6px ' + color;
    setTimeout(function() { p.el.style.opacity = '0'; }, 150);
  });
})();

3. Add your own theme

Add an entry to the themes object with your brand colors:

var themes = {
  fire: ['#ff4500','#ff6a00','#ffd700'],
  water: ['#00bfff','#1e90ff','#87ceeb'],
  nature: ['#22c55e','#4ade80','#86efac'],
  brand: ['#a78bfa','#f472b6','#60a5fa'], // Your custom colors
};

good to know

The script checks window.matchMedia('(pointer: fine)') to make sure it only runs on devices with a precise mouse pointer (desktop). On mobile and tablet, no cursor is shown, which avoids unwanted effects on touch events.

Conclusion

A themed cursor adds a narrative layer to navigation. Use cases:

Creative websites with distinct themed sections
Agency portfolios with transitions between projects
Storytelling landing pages with multiple acts

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss