<div class="container">
  <div class="dark">
    <div class="wrapper">
      <div class="shine-text">
        Your Text Here
      </div>
    </div>
  </div>
  <div class="light">
    <div class="wrapper">
      <div class="shine-text">
        Your Text Here
      </div>
    </div>
  </div>
</div>

body{
  padding:0;
  margin:0;
}

.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100wh;
  height: 100vh;
}

.dark{
  background-color: black;
  width: 100%;
  height: 100%;
}

.light {
  background-color: white;
  width: 100%;
  height: 100%;
}

.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.shine-text {
  font-size: 44px;
  color: transparent;
  background-clip: text !important;
  animation: shine 3s linear infinite;
}

.dark .shine-text{
  background: radial-gradient(circle at center,rgb(24 24 27 / 85%),transparent) -200% 50% / 200% 100% no-repeat,#f4f4f5;
}

.light .shine-text{
  background: radial-gradient(circle at center,rgba(255, 255, 255, 0.85),#f000) -200% 50% / 200% 100% no-repeat,#000
}

@keyframes shine {
    0% {
        background-position: 200% 0%;
    }
    100% {
        background-position: -200% 0%;
    }
}