Letter Fade In

<span class="demo-text text-fade-in" id="fadeInText">
  <span style="animation-delay: 0s">F</span>
  <span style="animation-delay: 0.08s">A</span>
  <span style="animation-delay: 0.16s">D</span>
  <span style="animation-delay: 0.24s">E</span> <span style="animation-delay: 0.4s">I</span>
  <span style="animation-delay: 0.48s">N</span>
</span>
<button class="replay-btn" onclick="replayFadeIn()">Replay</button>

.demo-text  {
   font-size: 2.5rem;
   font-weight: 800;
   letter-spacing: -0.02em;
   }

.text-fade-in span  {
   opacity: 0;
   animation: 0.5s ease 0s 1 normal forwards running fadeInLetter;
   }

@keyframes fadeInLetter  {
   
  100%  {
   opacity: 1;
   }
}

.replay-btn  {
   position: absolute;
   bottom: 15px;
   right: 15px;
   padding: 8px 16px;
   background: rgba(99, 102, 241, 0.2);
   border: 1px solid rgba(99, 102, 241, 0.4);
   border-radius: var(--radius-md);
   color: var(--primary-light);
   font-size: 0.8rem;
   font-weight: 500;
   cursor: pointer;
   transition: all var(--transition-fast);
   }

.replay-btn:hover  {
   background: rgba(99, 102, 241, 0.4);
   transform: scale(1.05);
   }

function splitText(element, text, delayStep = 0.05) {
      element.innerHTML = text.split('').map((char, i) => {
        if (char === ' ') return ' ';
        return `<span style="animation-delay: ${i * delayStep}s">${char}</span>`;
      }).join('');
    }

// 1. Letter Fade In
    function initFadeIn() {
      const el = document.getElementById('fadeInText');
      splitText(el, 'FADE IN', 0.08);
    }

function replayFadeIn() {
      const el = document.getElementById('fadeInText');
      el.innerHTML = '';
      setTimeout(() => initFadeIn(), 50);
    }