Shimmer text
A band of light that crosses a line of text: twice when it is first seen, or without end for a status that is in progress. The light is a faded run of the text's own colour, so it reads on any ground. Needs the EtchPress Motion stylesheet; without it the text is plain.
Live preview
Fourteen years, one crew.
Preparing your estimate
New this season
Booked through November
What you can build with it
A short claim in a hero that catches the eye once. A status line while a form or a quote is being prepared. An eyebrow over a new offer. A number or a date that deserves a second look.
Props
text (text); level (select: h2, h3, p, eyebrow); repeat (select: twice when seen, without end); speed (select: medium, slow, fast)
States shown
At rest the text is plain; the band crosses twice once it is in view, or keeps crossing on the endless setting. Selected text stays readable. Reduced motion: plain text, no band.
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 .shimmer-text. Its behaviour is a small script that travels with the component; no plugin and nothing to install.
ACSS tokens used
The element's own colour; text-s and text-dark-muted for the eyebrow; –ep-font-mono with a fallback.
ACSS requirements
ACSS 4 defaults. The EtchPress Motion stylesheet (free), 1.6.0 or later, for the band.
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.