Animated Slide-In Hero Heading with Tailwind

<h1 class="leading-none tracking-tight text-white select-none">
  <span id="aura-eme99d4vq" class="block text-[22vw] md:text-[16vw] xl:text-[12vw] 2xl:text-[10vw] font-extrabold" style="overflow: hidden;">
  <span style="display: inline-block; animation: letterSlideIn 0.8s ease-out forwards; animation-delay: 0s; transform: translateY(-100%); opacity: 0; clip-path: inset(0 0 100% 0);">K</span><span style="display: inline-block; animation: letterSlideIn 0.8s ease-out forwards; animation-delay: 0.1s; transform: translateY(-100%); opacity: 0; clip-path: inset(0 0 100% 0);">Y</span><span style="display: inline-block; animation: letterSlideIn 0.8s ease-out forwards; animation-delay: 0.2s; transform: translateY(-100%); opacity: 0; clip-path: inset(0 0 100% 0);">R</span><span style="display: inline-block; animation: letterSlideIn 0.8s ease-out forwards; animation-delay: 0.3s; transform: translateY(-100%); opacity: 0; clip-path: inset(0 0 100% 0);">O</span>
  <style>
    @keyframes letterSlideIn {
      0% {
        transform: translateY(-100%);
        opacity: 0;
        clip-path: inset(0 0 100% 0);
      }

      50% {
        opacity: 0.5;
        clip-path: inset(0 0 50% 0);
      }

      100% {
        transform: translateY(0);
        opacity: 1;
        clip-path: inset(0 0 0% 0);
      }
    }
  </style>
  </span>
</h1>