JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<body>
  <div class="cursor">
    <div class="text">Hongda</div>
    <div class="text">Hongda</div>
    <div class="text">Hongda</div>
    <div class="text">Hongda</div>
    <div class="text">Hongda</div>
    <div class="text">Hongda</div>
    <div class="text">Hongda</div>
    <div class="text">Hongda</div>
  </div>
</body>

CSS

body {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.text {
  position: absolute;
  pointer-events: none;
  color: #fff;
  font-size: 10em;
  -webkit-text-stroke: 2px #000;
  font-weight: 800;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

JavaScript

// https://juejin.cn/post/7311005736498167845

document.addEventListener("mousemove", (e) => {
  gsap.to(".text", {
    x: e.clientX,
    y: e.clientY,
    stagger: -0.02,
  })
})