Split text reveal

스플릿 텍스트 리빌

Breaking a sentence into individual characters or words, wrapping each in its own element, and revealing them one by one with a stagger. Libraries like SplitType or GSAP's SplitText automate the splitting.

Also known as: Text splittingPer-character reveal

···

html

<h1 class="split" id="split" aria-label="REVEAL"></h1>

css

.split{display:flex;font:800 clamp(22px,8vmin,54px)/1 sans-serif;color:var(--fg);letter-spacing:-.01em}
.split span{display:inline-block;opacity:0;transform:translateY(60%) rotate(6deg);
  animation:up .7s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes up{to{opacity:1;transform:translateY(0) rotate(0)}}

const word = 'REVEAL';
const el = document.getElementById('split');
function run() {
  el.innerHTML = '';
  [...word].forEach((ch, i) => {
    const s = document.createElement('span');
    s.textContent = ch;
    s.setAttribute('aria-hidden', 'true');
    s.style.animationDelay = (i * 70) + 'ms';
    el.appendChild(s);
  });
}
run();
setInterval(run, 2600);

Text is normally one indivisible block, so you can't animate part of it. The fix is wrapping each character (or word) in its own <span> with JS, then applying a stagger animation across those spans. For text that wraps across lines, splitting by word is safer — splitting by character can throw off line-wrap reflow.

For accessibility, keep the original text available via aria-label, and mark the split spans aria-hidden.

When to use

Use it for a headline you want to emphasize once. On body copy it just gets in the way of reading.