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

(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);
  });
})();

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