Link: swap
A 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.
What you can build with it
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.
Props
label (text); href (url); size (select: text, large, display); tone (select: link colour, heading colour); mode (select: letter by letter, all at once)
States shown
Rest, hover, focus, press (the phone's hover). Screen readers read the label once. Reduced motion: the label stays put. Without its script the label moves as one piece.
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 .swap-link, .swap-row. Its behaviour is a small script that travels with the component; no plugin and nothing to install.
ACSS tokens used
link-color, primary-dark, heading-color, text-dark, h1, h3, focus tokens; –ep-ease-in-out with a fallback.
ACSS requirements
ACSS 4 defaults. Nothing to install.
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.