Der schwebende Text ändert an der Mausposition seine Farbe

Question

Wie ändere ich die Textfarbe nur an der Mausposition statt des gesamten Textes? So

Ich möchte, dass der Kreis, den Sie sehen, der Mausbewegung folgt und der Text beim Schweben nur einen Rand für den Teil des Buchstabens anzeigt, in dem er sich befindet

Ich benötige Rat, welche Bibliothek oder Funktion ich verwenden muss?

Answer 1

const fx = document.querySelector(".fx");

document.addEventListener("pointermove", e => {
  fx.style.top = e.clientY + "px";
  fx.style.left = e.clientX + "px";
  fx.querySelector("h1").style.transform = `translate(${(e.clientX - fx.getBoundingClientRect().width / 2) * -1}px, ${(e.clientY - fx.getBoundingClientRect().height / 2) * -1}px)`;
})

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  position: relative;
}

.container h1 {
  font-size: 10rem;
  color: red;
}

.container .fx {
  width: 100px;
  height: 100px;
  outline: 1px solid blue;
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: -100px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: white;
}

.container .fx h1 {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 2px green;
  cursor: default;
  position: relative;
}

  
abc
  

    
abc