Skip to content
tileio

Menu

10 layers · 5 free

Text reveal animations for headlines and paragraphs

A reveal should follow how the text is read: by line for a headline, by word for a sentence, by character only when the text is meant to look like code. Split Line Reveal finds the line breaks at runtime and Stroke Draw measures each glyph, so both keep working when the copy or the width changes.

Under reduced motion the text is simply there. Keep reveals for the first screen and a few key lines; a page where every paragraph animates in is slower to read.

The 10 layers, in order

  1. Each line of a headline rises out of its own clipped slot, with the lines found from the real wrap at runtime.

  2. Words come into focus one after another, starting blurred and lifted, so reading starts before the last word lands.

  3. Characters cycle through random glyphs and lock in from left to right, so the word decodes rather than flickers.

  4. Real glyph outlines trace themselves in, then fill. Export your own text as paths and the timing adapts.

  5. Key phrases get a marker highlight that draws left to right as they scroll into view, even across line wraps.

  6. A slot that types a phrase, deletes it faster and types the next, its width reserved so the sentence never reflows.

  7. A three-line hero headline whose lines rise out of masks, then a band of light sweeps through them on a loop.

  8. A pinned paragraph that inks in word by word as you scroll, underlining key phrases when you reach them.

  9. A hero headline that types itself, then selects its last phrase and retypes it like someone editing.

  10. Numbers that roll into place like an odometer, higher digits settling first. For stats rather than words.

Browse the full catalogue: Sections · Elements

Related collections

All collections