Line reveal
A heading whose lines rise from behind a mask, one after the other, when it is seen or when the page loads. The lines are found after layout, so it works at any width. Needs the EtchPress Motion stylesheet; without it the text is simply there.
Live preview
Yards drawn, priced and built by one crew.
Yards drawn, priced and built by one crew, start to finish.
This one waits until you scroll to it, then each line rises in turn.
A short paragraph works too. Three or four lines is the limit: past that the last line arrives after the reader has started.
What you can build with it
The headline of a hero, rising line by line as the page opens. A section heading that arrives when the reader scrolls to it. A short statement on an about page. A pull quote of two or three lines.
Props
text (text); level (select: h2, h1, h3, p); trigger (select: scroll, load); speed (select: medium, slow, fast)
States shown
Before entry (each line below its mask), entering (lines in turn), settled. Screen readers get the whole sentence once. After a resize the lines are regrouped without replaying. Reduced motion: settled from the start.
How to change it
Content and options are 4 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 .line-reveal. Its behaviour is a small script that travels with the component; no plugin and nothing to install.
ACSS tokens used
None beyond the heading and text styles the element already has. Timing on –lr-duration and –lr-stagger; –ep-ease-out with a fallback.
ACSS requirements
ACSS 4 defaults. The EtchPress Motion stylesheet (free), 1.6.0 or later, for the rise.
Version history
Version 1.0.0, September 30, 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.