5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven text animations for headlines and hero sections: words that rise from behind a mask, letters moving in a wave, a rotating word, a highlighter sweeping across key phrases, a blur-in entrance, a decoding scramble and outlined letters that fill like rising liquid.
Each word slides up from below an invisible line, one after another, a staple of editorial landing pages. Every word sits in an overflow: hidden wrapper, and the heading's full text stays in the DOM in reading order so screen readers hear one sentence.
Each letter bobs up and down with a delay based on its position, producing a wave along the word. The letters are split into spans by script, the sentence is repeated once in visually hidden text, and the letter spans are hidden from assistive technology.
View code
<p class="ta2"><span class="sr">Loading your space</span><span class="l" aria-hidden="true">Loading your space</span></p>
var l = document.querySelector('.ta2 .l'), t = l.textContent;
l.textContent = '';
t.split('').forEach(function (c, i) { var s = document.createElement('span'); s.textContent = c; s.style.setProperty('--i', i); l.appendChild(s); });
03. Rotating Word in a Headline
TextRotator
The last word of the headline cycles through designers, developers and founders with a vertical slide. Screen readers get a static version, Built for designers, developers and founders, in a hidden span, because a changing word would be confusing to hear.
View code
<h3 class="ta3"><span class="sr">Built for designers, developers and founders</span><span aria-hidden="true">Built for <span class="box"><span class="list"><b>designers</b><b>developers</b><b>founders</b><b>designers</b></span></span></span></h3>
Key words in a sentence get a yellow highlighter stroke that sweeps across them on load, drawn with a background gradient whose size animates from 0 to 100 percent. The words are mark elements, so the emphasis is also semantic.
View code
<p class="ta4">Ship your store in <mark>one weekend</mark>, not <mark>three months</mark>.</p>
The headline starts blurred and slightly spaced out, then sharpens and tightens into place, a soft entrance suited to calm brands. filter: blur and letter-spacing animate once together, and the text is fully readable from the end of the first second.
Random characters resolve into the real text from left to right, like a terminal decoding a message. The final text is in the HTML from the start and the effect only runs on screen; the scrambling copy is aria-hidden and the real words sit in visually hidden text, so nothing garbled is read.
var el = document.querySelector('.ta6 .v'), final = el.textContent, chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&';
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) { var f = 0;
var id = setInterval(function () { el.textContent = final.split('').map(function (c, i) { return c === ' ' || i < f / 3 ? c : chars[Math.floor(Math.random() * chars.length)]; }).join(''); if (++f > final.length * 3) { clearInterval(id); el.textContent = final; } }, 40); }
07. Outline Text That Fills
TextStroke
Big outlined letters fill with solid colour from bottom to top, like liquid rising. The outline is -webkit-text-stroke, and the fill is a background clipped to the text whose position animates; browsers without text clipping show plain solid text.
Splitting a word into letter spans can make screen readers spell it out. Hide the split copy with aria-hidden and keep one plain copy of the sentence, visually hidden if necessary.
Masks for reveals
Wrap each word in an inline-block with overflow: hidden and slide the word up from 100 percent. The wrapper hides it until it rises, with no clip-path needed.
Changing words need a static version
A rotating word is fine to look at but confusing to hear. Give assistive technology a complete sentence that lists all the options, and hide the animated version from it.
Animate once, then rest
Text that keeps moving is hard to read. Run entrance effects once, keep loops for small decorative words, and stop everything under prefers-reduced-motion.
Frequently asked questions
Do text animations hurt SEO?
Not when the real text is in the HTML, which it is in every demo.
Why are some letters wrapped by JavaScript?
Splitting by hand is tedious; the script splits the text and adds an index for the stagger. The original text stays readable.
Can I use web fonts with these?
Yes. Load the font first to avoid the animation running on fallback text.