Texts
A number that counts up from zero once it scrolls into view, with a prefix, a suffix and a label. A few lines of script do the counting, and the final number sits in the markup, where search engines and screen readers read it.
How it works
A years in business or projects finished figure that counts up. A row of results on a home page. A fundraising or sign-up total on a campaign page.
Options
number (text, whole number); prefix (text); suffix (text); label (text); size (select: large, display, medium)
Open the item page
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.
How it works
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.
Options
text (text); level (select: h2, h3, p); size (select: normal, large, display); fillColor (select: text, primary); pin (select: pinned, flow).
Open the item pageGardens built to last.
A display headline whose letters rise out of the line one after another, then its last word changes through a short list, letter by letter. The headline keeps its height through every word, so nothing below it moves. Needs the EtchPress Runtime; without it the headline is plain.
How it works
The headline of a home page: what you build, for whom, said three ways. A services line that names each service in turn. An about page statement. A hero for a studio that does several things well.
Options
text (text); word (the last word, at rest); more (the words it changes to, separated by |); level (select: h1, h2); size (select: display, heading); repeat (select: twice round then rest, without end)
Open the item pageCome closer, it moves.
A headline whose letters lift, grow and take the accent colour as the pointer comes near, and settle as it leaves. On a phone a finger does the same and a soft wave crosses the line as the page scrolls. Needs the EtchPress Runtime; without it the headline is plain.
How it works
A playful hero headline. A contact section's invitation. A 404 page. The name of a studio at the top of its site.
Options
text (text); level (select: h2, h1, h3); size (select: display, heading)
Open the item page
Rows of very large type that slide past without end, alternate rows the other way. Scrolling the page speeds them up, leans them and turns them round when the scroll turns. The same on a phone. Needs the EtchPress Runtime; without it each row is one still line.
How it works
A band of words between two sections: what you do, said large. Client or city names on a studio's home page. A footer opener. A break in a long case study.
Options
rows (repeater: text, style: solid or soft); speed (select: calm, slow, quick)
Open the item page
A heading with one phrase marked by a highlighter stroke that draws itself in when the heading scrolls into view. Before, after and the marked phrase are three text props, so the sentence reads as one heading.
How it works
A headline with its key phrase marked as it comes into view. A value statement at the top of a section. A pull line in the middle of a long page.
Options
before (text); phrase (text); after (text); level (select: h1, h2, h3); colour (select: primary, accent, neutral); style (select: marker, underline, block)
Open the item page
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.
How it works
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.
Options
text (text); level (select: h2, h1, h3, p); trigger (select: scroll, load); speed (select: medium, slow, fast)
Open the item pageA text link whose letters roll up out of the line on hover while the same word rolls in from below, letter by letter or all at once. For a navigation row, a footer, or one large call to read on. No stylesheet to install.
How it works
The links of a header or a footer, with a little life on hover. One large link at the end of a section: "See the work". A display-size call to action on a studio home page. Any inline link that should feel made, not default.
Options
label (text); href (url); size (select: text, large, display); tone (select: link colour, heading colour); mode (select: letter by letter, all at once)
Open the item page
A heading or paragraph whose words enter one after another: rising, fading or sharpening from a blur. Triggered when it scrolls into view or on page load. Needs the EtchPress Motion stylesheet (free); without it, and for people who prefer reduced motion, the text simply shows. Line wipe: a colour bar crosses each line and the words are there when it leaves; word blocks do the same per word.
How it works
A headline whose words arrive one after another. A section opener that enters when it is reached. A short statement on a landing page.
Options
text (text); level (select: h1, h2, h3, p); effect (select: wipe, rise, blur, fade, block); trigger (select: scroll, load); speed (select: medium, slow, fast)
Open the item page
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.
How it works
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.
Options
text (text); level (select: h2, h3, p, eyebrow); repeat (select: twice when seen, without end); speed (select: medium, slow, fast)
Open the item page- 14Years in business
A number and its label. Tabular figures, a size select, and an optional prefix and suffix so 14+, .4M and 98% keep one baseline. Put four in a row for a numbers band.
How it works
A number and its label, in a band of four. A single headline figure beside a paragraph. Results in a case study.
Options
number (text); prefix (text, optional); suffix (text, optional); label (text); size (select: large, medium, display)
Open the item page Booked through March 2027
A line of type whose letters run through other letters and settle from left to right when it is seen, like a departure board. Hovering it, or tapping it on a phone, runs it again. Needs the EtchPress Runtime; without it the line is plain.
How it works
An eyebrow or a short claim on a technical product's page. A number or a code that should feel computed. Section labels on a studio site. A status line that deserves a second look.
Options
text (text); level (select: h2, h1, h3, p); font (select: monospace, the heading font); speed (select: medium, slow, fast)
Open the item page
Nothing matches. Clear the search.