<div class="container">
  <span>W</span>
  <span>E</span>
  <span>L</span>
  <span>C</span>
  <span>O</span>
  <span>M</span>
  <span>E</span>
  <span>!</span>
  <span>W</span>
  <span>3</span>
  <span>C</span>
  <span>P</span>
  <span>L</span>
  <span>U</span>
  <span>S</span>
  <span>.</span>
  <span>C</span>
  <span>O</span>
  <span>M</span>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

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

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;

  gap: 15px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}

@property --hue {
  initial-value: 0;
  inherits: false;
  syntax: "<number>";
}

:root {
  --clientX: 10;
  --clientY: 10;
}

@keyframes rainbow {
  to {
    --hue: 360;
  }
}

span {
  color: hsl(var(--hue) 80% 50%);
  text-shadow: calc(var(--clientX) * 0.1px) calc(var(--clientY) * 0.1px) 0
      hsl(calc(var(--hue) / 2) 80% 50%),
    calc(var(--clientX) * 0.2px) calc(var(--clientY) * 0.2px) 0
      hsl(calc(var(--hue) / 3) 80% 50%),
    calc(var(--clientX) * 0.3px) calc(var(--clientY) * 0.3px) 0
      hsl(calc(var(--hue) / 4) 80% 50%),
    calc(var(--clientX) * 0.4px) calc(var(--clientY) * 0.4px) 0
      hsl(calc(var(--hue) / 5) 80% 50%),
    calc(var(--clientX) * 0.5px) calc(var(--clientY) * 0.5px) 0
      hsl(calc(var(--hue) / 6) 80% 50%),
    calc(var(--clientX) * 0.6px) calc(var(--clientY) * 0.6px) 0
      hsl(calc(var(--hue) / 7) 80% 50%),
    calc(var(--clientX) * 0.7px) calc(var(--clientY) * 0.7px) 0
      hsl(calc(var(--hue) / 8) 80% 50%),
    calc(var(--clientX) * 0.8px) calc(var(--clientY) * 0.8px) 0
      hsl(calc(var(--hue) / 9) 80% 50%),
    calc(var(--clientX) * 0.9px) calc(var(--clientY) * 0.9px) 0
      hsl(calc(var(--hue) / 10) 80% 50%);
  font-size: 5vw;
  display: inline-flex;
  animation: rainbow 2s linear calc(var(--index, 0) * -0.2s) infinite;
}
import gsap from "https://cdn.skypack.dev/gsap";

const letterEles = document.querySelectorAll(".container > span");
const container = document.querySelector(".container");

for (var i = 0, len = letterEles.length; i < len; i++) {
  letterEles[i].style.setProperty("--index", i);
}

document.addEventListener("pointermove", ({ x, y }) => {
  gsap.set(container, {
    "--clientX": gsap.utils.mapRange(0, window.innerWidth, -100, 100, x),
    "--clientY": gsap.utils.mapRange(0, window.innerHeight, -100, 100, y)
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.