Click Ripple Effect Generator

.ripple-target {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-anim 600ms ease-out;
  pointer-events: none;
  background: #2563eb80;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

function attachRipple(el, size = 80) {
  el.classList.add('ripple-target');
  el.addEventListener('pointerdown', (e) => {
    const r = document.createElement('span');
    r.className = 'ripple';
    const rect = el.getBoundingClientRect();
    const d = Math.max(rect.width, rect.height, size);
    r.style.width = r.style.height = d + 'px';
    r.style.left = (e.clientX - rect.left - d / 2) + 'px';
    r.style.top = (e.clientY - rect.top - d / 2) + 'px';
    el.appendChild(r);
    r.addEventListener('animationend', () => r.remove());
  });
}

.cursor-dot-wrap {
  position: relative;
}
.cursor-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2563eb;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.05s linear, top 0.05s linear;
}

function attachCursorDot(el) {
  el.classList.add('cursor-dot-wrap');
  const dot = document.createElement('div');
  dot.className = 'cursor-dot';
  el.appendChild(dot);
  el.addEventListener('pointermove', (e) => {
    const rect = el.getBoundingClientRect();
    dot.style.left = (e.clientX - rect.left) + 'px';
    dot.style.top = (e.clientY - rect.top) + 'px';
  });
}