Blob Blend Cursor

<div class="nuda-blobcur-area">
  <span class="nuda-blobcur__text">CREATE</span>
  <span class="nuda-blobcur__blob"></span>
</div>

(function () {
  var area = document.querySelector('.nuda-blobcur-area');
  var blob = area.querySelector('.nuda-blobcur__blob');
  if (!area) return;

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

.nuda-blobcur-area {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 130px;
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.nuda-blobcur__text {
  color: #09090b;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.02em;
  font-family: Georgia,serif;
}

.nuda-blobcur__blob {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e4ff54;
  pointer-events: none;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),width .35s,height .35s;
  left: -50px;
  top: 50%;
}

.nuda-blobcur-area:hover .nuda-blobcur__blob {
  animation: _blobMorph 4s ease-in-out infinite;
}

@keyframes _blobMorph {
  0%,100% {
    border-radius: 50%;
  }
  33% {
    border-radius: 60% 40% 50% 70%/50%;
  }
  66% {
    border-radius: 40% 60% 70% 50%/60%;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-blobcur-area:hover .nuda-blobcur__blob {
    animation: none;
  }
}