Cursor Glow Ring

<div class="cgr-area" id="cgr-area">
  <div class="cgr-ring" id="cgr-ring"></div>
  <p>Move your cursor</p>
</div>

.cgr-area {
  position: relative;
  width: 300px;
  height: 200px;
  background: #0f172a;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 14px;
  overflow: hidden;
  cursor: none;
}
.cgr-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid #6366f1;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 15px rgba(99,102,241,0.5);
  transition: transform 0.08s ease-out;
  transform: translate(-50%, -50%);
}

const area = document.getElementById('cgr-area');
const ring = document.getElementById('cgr-ring');
area.addEventListener('mousemove', function(e) {
  const rect = area.getBoundingClientRect();
  ring.style.left = (e.clientX - rect.left) + 'px';
  ring.style.top = (e.clientY - rect.top) + 'px';
  ring.style.opacity = '1';
});
area.addEventListener('mouseleave', function() {
  ring.style.opacity = '0';
});