Skip to main content

Scroll Text Highlight — Playground

Great typography guides the eye. As you scroll, each word lights up in turn — a simple, focused reading rhythm that keeps attention exactly where you want it.

Drag the vertical scroll on the right edge — each word lights up as it passes.
Fill — options
Sample option — updates as you tweak
'scroll_text_highlight' => [
    'mode' => 'fill',
    'fill' => [
        'split'        => 'word',
        'active_color' => [ 'predefined' => '', 'custom' => '#2f74e6' ],
        'duration'     => 0.5,
        'once'         => 'yes',
    ],
],

Scroll Text Highlight is a per-element control on the Animationstab. The runtime splits the text into word (or character) spans and scrubs each from muted to full as it scrolls through the viewport — pure CSS transitions + one passive scroll check. Colours use the theme color-preset picker; it honours reduced motion (everything lit).

Pick a style on the right and drag the vertical scroll on the stage's right edge — each word lights up as it passes, exactly as it does on a real page. This runs the real runtime: the text is split into word (or character) .sth-w spans and an .is-on class is scrubbed across them by scroll progress, with the verbatim per-style CSS for all 20 styles. Tweak split, highlight colour, per-word ease and keep-highlighted. The Sample option updates as you tweak.

Where it lives

Scroll Text Highlight is a per-element control — open a text element → Animations tab → Scroll Text Highlight. On a live page the progress is the element's passage through the viewport (a passive, rAF-throttled scroll check); here the vertical slider stands in for the scroll. It honours reduce motion (everything shown lit) and loads only on pages that use it.

← Back to Scroll Text Highlight