<div class="wrapper">
      <div class="hero">
        <h1 class="hero-heading">Hi, I'm Kartik</h1>
        <p>A web developer.</p>
      </div>
      <div class="hero hero-secondary" aria-hidden="true">
        <h1 class="hero-heading">Hi, I'm Kartik</h1>
        <p>A web developer.</p>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

* {
  box-sizing: border-box;
  color: white;
  margin: 0;
  padding: 0;
}
:root {
  --primary: turquoise;
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
}
body {
  background-color: #090e17;
}

.wrapper {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.hero p {
  color: transparent;
}

.hero-heading {
  -webkit-text-stroke: 1px var(--primary);
  filter: drop-shadow(0 0 0.35rem var(--primary));

  color: transparent;
}

.hero-secondary {
  --mask: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    black var(--maskSize1, 0%),
    transparent 0,
    transparent var(--maskSize2, 0%),
    black var(--maskSize2, 0%),
    black var(--maskSize3, 0%),
    transparent 0
  );
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #40e0d0, #9932cc, #ff1493, orange);
  mask-image: var(--mask);
  -webkit-mask-image: var(--mask);
  /* clip-path: circle(15% at var(--x, 70%) var(--y, 50%)); */
}
.hero-secondary .hero-heading {
  background: radial-gradient(circle at center, #090e17 0.05rem, transparent 0);
  background-size: 0.15rem 0.15rem;
  filter: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: unset;
}
.hero-secondary p {
  color: rgb(255, 255, 255);
}
const hero = document.querySelector(".hero-secondary")
const tl = gsap.timeline({ delay: 1 })

tl.to(hero, {
  "--maskSize1": "20%",
  duration: 0.5,
  ease: "back.out(2)",
}).to(hero, {
  "--maskSize2": "28%",
  "--maskSize3": "calc(28% + 0.1rem)",
  duration: 0.5,
  delay: 0.5,
  ease: "back.out(2)",
})

window.addEventListener("mousemove", (e) => {
  const { clientX, clientY } = e
  const x = Math.round((clientX / window.innerWidth) * 100)
  const y = Math.round((clientY / window.innerHeight) * 100)

  gsap.to(hero, {
    "--x": `${x}%`,
    "--y": `${y}%`,
    duration: 0.3,
    ease: "sine.out",
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.