Highlighter sweeps a marker stroke under your words and flips them to ink as it passes, so the text changes colour in the wake of the pen.
What Highlighter is good for
Educational and explainer content
Emphasis and callout moments
Note-taking and study-adjacent branding
How this animation is built
hl-sweep drives the marker stroke across via SMIL, and the colour change is a mask tied to the stroke's leading edge — so letters flip exactly as the pen reaches them rather than on a timer. hl-up lifts the words slightly as they are marked.
Tips for Highlighter
The colour contrast between marked and unmarked is what carries it; a subtle difference wastes the effect.
Reads well on light backgrounds, where a highlighter would actually be used.
Highlighter questions
Does the highlight follow the text exactly?
Yes — the mask is tied to the stroke position, so the flip happens per letter as the marker crosses it, however long the word is.
Related animation styles
Focus Pull — Cinematic blur-to-sharp reveal with a passing sheen
Impact — Word slams in with a spring pop and shockwave rings
Odometer — Digits roll up like a mechanical counter
Aberration — Chromatic channels tear apart and snap into focus
Billboard — Words flip up like rotating sign boards
Repeater — Racing rows of type — the middle one snaps center and lights up