Letter Wave Text

Each letter hops and flashes in turn, like a wave travelling through the word. Anime.js stagger.

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<h2 class="letter-wave">Making waves</h2>

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Load Anime.js from the CDN (see the JS tab), then add the script.
Adjust the custom properties (--accent) on .letter-wave to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.