<div class="card-27">
  <div class="card-27__aurora"></div>
  <div class="card-27__content">
    <span class="card-27__tag">Aurora</span>
    <h4 class="card-27__title">Aurora</h4>
    <p class="card-27__body">Two light orbs follow your cursor through the card.</p>
  </div>
</div>

.card-27__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-27__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-27__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-27 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 16px;
  background: #050510;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: none;
  min-height: 130px;
  transition: border-color 0.4s;
}
.card-27:hover {
  border-color: rgba(124, 108, 255, 0.4);
}
.card-27__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.card-27__aurora::before,
.card-27__aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  transition:
    left 0.65s ease,
    top 0.65s ease,
    opacity 0.4s;
  opacity: 0;
}
.card-27__aurora::before {
  width: 160px;
  height: 160px;
  background: rgba(124, 108, 255, 0.55);
  left: var(--ax, 20%);
  top: var(--ay, 30%);
  transform: translate(-50%, -50%);
}
.card-27__aurora::after {
  width: 130px;
  height: 130px;
  background: rgba(30, 217, 138, 0.4);
  left: var(--bx, 70%);
  top: var(--by, 60%);
  transform: translate(-50%, -50%);
}
.card-27:hover .card-27__aurora::before,
.card-27:hover .card-27__aurora::after {
  opacity: 1;
}
.card-27__content {
  position: relative;
  z-index: 1;
}

document.querySelectorAll(".card-27").forEach(function (card) {
  var aurora = card.querySelector(".card-27__aurora");
  card.addEventListener("mousemove", function (e) {
    var r = card.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width)  * 100;
    var y = ((e.clientY - r.top)  / r.height) * 100;
    aurora.style.setProperty("--ax", x + "%");
    aurora.style.setProperty("--ay", y + "%");
    aurora.style.setProperty("--bx", (100 - x) + "%");
    aurora.style.setProperty("--by", (100 - y) + "%");
  });
});