타이프라이터

<div class="type"><span id="txt"></span><i class="cursor"></i></div>

.type{display:flex;align-items:center;max-width:88%;font:700 clamp(15px,5.2vmin,28px)/1.2 ui-monospace,monospace;color:var(--fg)}
.cursor{width:2px;height:1em;background:var(--accent);margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

const words = ['이징을 이해하면', '모션이 보인다', 'Design Atlas'];
const el = document.getElementById('txt');
let wi = 0, ci = 0, deleting = false;
function tick() {
  const word = words[wi];
  el.textContent = word.slice(0, ci);
  if (!deleting) {
    ci++;
    if (ci > word.length) { deleting = true; setTimeout(tick, 900); return; }
  } else {
    ci--;
    if (ci < 0) { deleting = false; wi = (wi + 1) % words.length; ci = 0; }
  }
  setTimeout(tick, deleting ? 40 : 80);
}
tick();