Design Atlas
한국어
Aa Typography

Kinetic typography

키네틱 타이포그래피

Typography where individual letters move to carry rhythm or emotion — common in title sequences, captions, and loading screens.

Also known as: 움직이는 텍스트Motion typography
···
html
<div class="stage"><div class="line" id="line"></div></div>
css
.line{display:flex;flex-wrap:wrap;justify-content:center;font:800 7vmin/1.3 system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;color:var(--fg);max-width:92%}
.line .word{display:inline-flex}
.line .sp{width:.3em;flex:none}
.line .ch{display:inline-block;animation:bounce 1.8s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-.28em);opacity:1}}
js
const words = ['MOVE', '움직임'];
const line = document.getElementById('line');
let globalIndex = 0;
words.forEach(function(word, wi){
  if (wi > 0) {
    const sp = document.createElement('span');
    sp.className = 'sp';
    line.appendChild(sp);
  }
  const group = document.createElement('span');
  group.className = 'word';
  [...word].forEach(function(ch){
    const s = document.createElement('span');
    s.className = 'ch';
    s.textContent = ch;
    s.style.animationDelay = (globalIndex * 0.08) + 's';
    group.appendChild(s);
    globalIndex++;
  });
  line.appendChild(group);
});

Often traced to Saul Bass's 1950s–60s film title sequences, kinetic type later spread into music videos, ads, and motion graphics broadly. The key technique is per-letter stagger — instead of the whole word moving together, each letter gets a slightly different delay so the motion ripples across it.

On the web, the common approach splits text into per-character `<span>` elements and sets `animation-delay` proportional to each one's index. Pure CSS handles the basic case; tying motion to scroll position or user input means computing progress in JS and updating each letter's transform.

Overused, it distracts from the message it's supposed to carry — reserve it for short headlines, loading states, or emphasis, where being seen matters more than being read carefully.

When to use

Short hero headlines, loading/success messages, or a single emphasised phrase. Never for long body paragraphs.