Animation Engine
Scroll Text Highlight
Light up a heading word-by-word (or character-by-character) as it scrolls through the viewport — the “read-along” effect, with a colour fill, opacity fade, blur-to-sharp or a highlighter marker sweep. Applied to any heading.
Read-along reveal
Words that light up as you read.
Each heading below reveals word-by-word tied to your scroll position — the effect that carries long-form statements. Four styles, applied from the heading’s Animations tab. Scroll slowly to watch each word catch.
Highlight style
Fill
Each word fills with colour as it passes the read line.
We build the tools we wish existed, then give them away for free.
Highlight style
Fade
Dim words brighten to full opacity in turn.
A clean DOM, real 3D, and motion that respects the reader.
Highlight style
Blur to sharp
Soft-blurred words snap into focus one by one.
Design freely. Own your stack. Ship without the lock-in.
Highlight style
Marker sweep
A highlighter draws across each word as you reach it.
Every module here is bundled, free, and open source.
How to set it up
Add it in under a minute
- Add a heading (Special Heading or any text element).
- Open it → Animations → Scroll Text Highlight.
- Pick a style (Fill, Fade, Blur, Marker) and split by word or character.
- Save and scroll through it — the words light up in sequence.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.