Animated Words Hero

<!--
  A CSS-only word rotator. The column of words is translated up one line per
  step; a copy of the first word is appended so the loop from last back to first
  is seamless rather than a snap. The keyframes are written for four words -
  change the count and you change the step maths, so keep them in sync.
  motion-reduce:animate-none freezes it on the first word, which stays legible.
-->
<style>
  @keyframes hero-word-rotate {
    0%, 16%   { transform: translateY(0); }
    25%, 41%  { transform: translateY(-100%); }
    50%, 66%  { transform: translateY(-200%); }
    75%, 91%  { transform: translateY(-300%); }
    100%      { transform: translateY(-400%); }
  }
</style>

<section class="mx-auto w-full max-w-3xl px-4 py-12 text-center sm:py-20">
  <h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-5xl dark:text-gray-100">
    Software that
    <span class="relative inline-flex h-[1.15em] overflow-hidden align-bottom text-blue-600 dark:text-blue-400">
      <span class="flex flex-col animate-[hero-word-rotate_9s_infinite] motion-reduce:animate-none">
        <span class="flex h-[1.15em] items-center leading-none">ships</span>
        <span class="flex h-[1.15em] items-center leading-none">scales</span>
        <span class="flex h-[1.15em] items-center leading-none">adapts</span>
        <span class="flex h-[1.15em] items-center leading-none">delights</span>
        <span class="flex h-[1.15em] items-center leading-none">ships</span>
      </span>
    </span>
  </h1>
  <p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-600 dark:text-gray-400">
    One platform that keeps pace with your team, whatever you are building.
  </p>
  <a href="#" class="mt-6 inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
    Get started
  </a>
</section>