Ring Follower

<div class="nuda-ringfollow-area">
  <div class="nuda-ringfollow__ring"></div>
  <div class="nuda-ringfollow__dot"></div>
  <span>Move your mouse</span>
</div>

(function () {
  var area = document.querySelector('.nuda-ringfollow-area');
  var dot  = area.querySelector('.nuda-ringfollow__dot');
  var ring = area.querySelector('.nuda-ringfollow__ring');
  if (!area) return;

  area.addEventListener('mousemove', function (e) {
    var rect = area.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    dot.style.left  = ring.style.left = x + 'px';
    dot.style.top   = ring.style.top  = y + 'px';
  });

  area.querySelectorAll('a, button, span').forEach(function (el) {
    el.addEventListener('mouseenter', function () {
      ring.style.width = ring.style.height = '52px';
      ring.style.opacity = '0.5';
    });
    el.addEventListener('mouseleave', function () {
      ring.style.width = ring.style.height = '34px';
      ring.style.opacity = '1';
    });
  });
})();

.nuda-ringfollow-area {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: none;
}

.nuda-ringfollow__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e4ff54;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.06s;
  z-index: 2;
}

.nuda-ringfollow__ring {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #e4ff54;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.25s,
    height 0.25s,
    opacity 0.25s;
}