Fill text
A paragraph or heading whose words turn from muted to full colour in reading order as the reader scrolls. Pinned, the text holds in the middle of the screen while a tall section scrolls through; in the flow, it fills as it rises. Pure CSS on a view timeline (Chrome, Edge, Safari 26) plus a few lines that wrap the words; where the browser lacks view timelines the text is simply filled.
Live preview
We build patios that stay level through winter, walls that hold, and beds that come back every spring. Fourteen years, one crew, one number to call.
Scroll-linked: the text holds in the middle of the screen while the words fill in reading order. Scroll to see it move.
Fourteen years. One crew. One number to call.
We build patios that stay level through winter, walls that hold, and beds that come back every spring. Fourteen years, one crew, one number to call.
What you can build with it
A mission statement that fills with colour as it is read. A pinned manifesto paragraph between two sections. A pull quote that rewards the scroll.
Props
text (text); level (select: h2, h3, p); size (select: normal, large, display); fillColor (select: text, primary); pin (select: pinned, flow).
States shown
Muted, filling word by word (scroll position), filled. Pinned: the section is 220vh (–ft-room) and the text sticks at the middle (its height measured into –ft-h). Reduced motion, or no view timelines: filled from the start.
How to change it
Content and options are 5 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .fill-text. Its behaviour is a small script that travels with the component; no plugin and nothing to install.
ACSS tokens used
–text-dark-muted for the unfilled colour, –text-dark or –primary-dark for the fill.
ACSS requirements
ACSS 4 defaults. No stylesheet needed; a few lines of script follow the scroll.
Version history
Version 1.0.0, September 19, 2026: First release.
Tested with
Etch 1.6.7 and ACSS 4.0.1. Version 1.0.0.
Lifetime members
Members copy this straight into Etch, ready to paste.
Used an earlier version? How to update it
Get lifetime accessWant EtchPress for Bricks or the block editor?
Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.