Design Atlas
한국어
↝ Motion

Typewriter

타이프라이터

Text that appears one character at a time like a typewriter, with a blinking cursor trailing the last letter.

Also known as: Type-on effectText typing animation
···
html
<div class="type"><span id="txt"></span><i class="cursor"></i></div>
css
.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}}
js
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();

The classic CSS-only trick animates width from 0 to 100% with overflow: hidden, using steps(n) so it advances one character per step. It's fiddly to get exact with variable-width fonts, so production code more often updates a text node's substring in JS instead.

For multiple lines, the common loop types a sentence, deletes it, then types the next. The cursor is usually a separate element blinking with steps(1).

When to use

Save it for one hero headline. Used on body paragraphs, it forces reading speed down and becomes annoying.