JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div id="light">
  Hongda Lin
</div>

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;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  font-family: "NeueMontreal-Bold", sans-serif;
}

@property --rotate {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

#light {
  font-size: 100px;
  text-transform: uppercase;
  background: conic-gradient(from var(--rotate) at 30% 10%, #0b1012 40%, #f4f7fc55, #0b1012 60%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  animation: rotateLight 3s ease-in-out infinite alternate;
}

@keyframes rotateLight {
  from {
    --rotate: 0.15turn;
  }

  to {
    --rotate: -0.15turn;
  }
}