<div class="main">
  <div class="wrapper">
    <div class="c default-content">
      <h1>ElSalto</h1>
      <h1>WEB</h1>
    </div>
    <div class="c reveal-content">
      <h1>Diseño️</h1>
      <h1>Frontend</h1>
    </div>
  </div>
</div>
<script>
    
    var revealContent = document.querySelector(".reveal-content");
var boundRect;

var mouse = { x: 0, y: 0 };
var revealer = {x: 0, y: 0 };

document.addEventListener("mousemove", (e) => {
  boundRect = revealContent.getBoundingClientRect();
  mouse.x = e.clientX - boundRect.x;
  mouse.y = e.clientY - boundRect.y;  
});

function updateFrame() {
  
  revealer.x += (mouse.x - revealer.x) * 0.1;
  revealer.y += (mouse.y - revealer.y) * 0.1;
  
  revealContent.style.setProperty("--x", `${revealer.x}px`);
  revealContent.style.setProperty("--y", `${revealer.y}px`);
  
  window.requestAnimationFrame(updateFrame);
}
updateFrame();

    
</script>