https://pupwife.com/scripts/effects/clickSparks.js

1(function () {
2  'use strict';
3
4  function ensureStyles() {
5    if (document.getElementById('click-sparks-styles')) return;
6    var style = document.createElement('style');
7    style.id = 'click-sparks-styles';
8    style.textContent =
9      '.click-spark {' +
10      '  position: fixed;' +
11      '  pointer-events: none;' +
12      '  border-radius: 50%;' +
13      '  z-index: 10050;' +
14      '  box-shadow: 0 0 10px rgba(255, 200, 150, 0.8);' +
15      '  mix-blend-mode: hard-light;' +
16      '}' +
17      '@keyframes sparkPulse {' +
18      '  from { transform: scale(1); filter: brightness(1); }' +
19      '  to { transform: scale(1.3); filter: brightness(1.5); }' +
20      '}';
21    document.head.appendChild(style);
22  }
23
24  function sparksEnabled() {
25    if (window.PERFORMANCE_MODE_ENABLED) return false;
26    return !window.CLICK_SPARKS_DISABLED;
27  }
28
29  function createClickBurst(x, y) {
30    var particleCount = 15;
31    var colors = window.CLICK_SPARK_BIRTHDAY_PALETTE || [
32      'var(--favorite-color, #ff9f43)',
33      '#FFB347',
34      '#FF6B81',
35      'var(--accent-color, #c8a8ff)',
36      '#ECA3FF',
37      'var(--link-color, #a78bfa)'
38    ];
39
40    for (var i = 0; i < particleCount; i++) {
41      var particle = document.createElement('div');
42      particle.classList.add('click-spark');
43
44      var color = colors[Math.floor(Math.random() * colors.length)];
45      particle.style.background = color;
46      var size = Math.random() * 6 + 4;
47      particle.style.width = size + 'px';
48      particle.style.height = size + 'px';
49      particle.style.left = x + 'px';
50      particle.style.top = y + 'px';
51
52      var pulseSpeed = 300 + Math.random() * 200;
53      particle.style.animation = 'sparkPulse ' + pulseSpeed + 'ms ease-in-out infinite alternate';
54
55      document.body.appendChild(particle);
56
57      var angle = Math.random() * 2 * Math.PI;
58      var distance = Math.random() * 60 + 20;
59      var dx = Math.cos(angle) * distance;
60      var dy = Math.sin(angle) * distance;
61
62      particle.animate(
63        [
64          { transform: 'translate(0, 0) scale(1)', opacity: 1 },
65          { transform: 'translate(' + dx + 'px, ' + dy + 'px) scale(1.2)', opacity: 0 }
66        ],
67        {
68          duration: 700 + Math.random() * 200,
69          easing: 'ease-out',
70          fill: 'forwards'
71        }
72      );
73
74      setTimeout(function (node) {
75        return function () {
76          if (node.parentNode) node.remove();
77        };
78      }(particle), 900);
79    }
80  }
81
82  document.addEventListener('click', function (e) {
83    if (!sparksEnabled()) return;
84    createClickBurst(e.clientX, e.clientY);
85  });
86
87  ensureStyles();
88
89  window.createClickBurst = createClickBurst;
90  window.ClickSparks = {
91    setEnabled: function (enabled) {
92      window.CLICK_SPARKS_DISABLED = !enabled;
93    },
94    isEnabled: sparksEnabled
95  };
96})();