JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<h2 class="text">
  Hongda - Hongda - Hongda -
</h2>

CSS

@font-face {
  font-family: "NeueMontreal-Bold";
  src: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgNeueMontreal-Bold.otf");
  font-display: swap;
}

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

:root {
  --primary-color: #000;
}

body {
  min-height: 100vh;
  background: #ccc;
  font-family: "NeueMontreal-Bold", sans-serif;
  overflow: hidden;
  cursor: none;
}

.text {
  position: absolute;
  font-size: 1.5em;
  color: var(--primary-color);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.25s;
}

.text::before {
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

.text span {
  position: absolute;
  top: -100px;
  text-transform: uppercase;
  font-weight: 400;
  transform-origin: 0 100px;
}

body:hover .text {
  opacity: 1;
}

JavaScript

const textEle = document.querySelector('.text');

textEle.innerHTML = textEle.textContent.replace(/\S/g, '<span>$&</span>');

const spanEle = document.querySelectorAll('span');
spanEle.forEach((ele, index) => {
  ele.style.transform = `rotate(${index * 17}deg)`
});

document.addEventListener('mousemove', e => {
  textEle.style.left = `${e.pageX}px`;
  textEle.style.top = `${e.pageY}px`;

  textEle.style.transform = `rotate(${e.pageX / 2}deg) rotate(${e.pageY / -2}deg)`;
});