Typewriter Text

<!--
  A pure-CSS single-phrase typewriter: a steps() width animation reveals the
  text, a blinking right border plays the caret. Reduced motion shows it whole.
-->
<p
  class="inline-block overflow-hidden whitespace-nowrap border-r-2 border-gray-900 pr-1 font-mono text-xl font-semibold text-gray-900 motion-reduce:!w-full motion-reduce:border-transparent dark:border-gray-100 dark:text-gray-100"
  style="width: 22ch; animation: typing 2.4s steps(22, end) forwards, blink 800ms step-end infinite;"
>
  Build without limits.
</p>

<style>
  @keyframes typing {
    from { width: 0; }
    to { width: 22ch; }
  }
  @keyframes blink {
    50% { border-color: transparent; }
  }
</style>