Typewriter

<!-- Typewriter — text types character by character with blinking cursor -->
<div class="nuda-typewriter">
  <span class="nuda-typewriter__text">Welcome to NudaUI.</span>
</div>

/* ── Typewriter ─────────────────────────────────────────────
   Customize:
     --nuda-tw-speed       : total typing duration
     --nuda-tw-steps       : number of characters in your text
     --nuda-tw-cursor-clr  : cursor color
     --nuda-tw-cursor-w    : cursor width
   ──────────────────────────────────────────────────────────── */
.nuda-typewriter {
  --nuda-tw-speed: 2.8s;
  --nuda-tw-steps: 19;       /* update to match character count */
  --nuda-tw-cursor-clr: currentColor;
  --nuda-tw-cursor-w: 3px;

  font-family: monospace;
  display: inline-block;
}

.nuda-typewriter__text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: var(--nuda-tw-cursor-w) solid var(--nuda-tw-cursor-clr);
  width: 0;
  animation:
    nuda-typewriter-type var(--nuda-tw-speed) steps(var(--nuda-tw-steps)) forwards,
    nuda-typewriter-blink 0.7s step-end infinite;
}

@keyframes nuda-typewriter-type {
  to { width: 100%; }
}

@keyframes nuda-typewriter-blink {
  50% { border-color: transparent; }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-typewriter__text {
    animation: none;
    width: 100%;
    border-right-color: transparent;
  }
}