Coyote Labby Coyote Concept

NewCSS + small JS · animation-delay · custom properties

Letter Wave

Each letter of the label rises in turn, like a wave passing through, and catches the accent colour at its peak.

A free letter wave animation in HTML and CSS (with a few lines of JavaScript). Also known as wavy text hover, staggered letter animation, bouncing letters or text wave effect.

Class
.CCWave
Weight
1.2 KB
Needs
CSS + a few lines of JS
Best for
Playful brands, links, tab bars

Tune it

Every snippet on this page follows these settings.

How the Letter Wave hover effect works

  1. Script splits each label into letters and gives each one its index as --i.
  2. One keyframe lifts a letter and tints it, then sets it down with a little overshoot.
  3. Each letter's animation-delay is its index times 35ms, so the lift travels along the word.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCWave">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Letter Wave on button, tabs, dropdown, card.

More ways to use it

The same class on headline, badge, nav bar.

The Letter Wave code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS
.CCWave .CCWave-l { display: inline-block; white-space: pre; }
.CCWave:is(:hover, :focus-visible, :focus-within) .CCWave-l {
  animation: ccWave calc(.6s / var(--cc-speed)) cubic-bezier(.3, 1.6, .5, 1) both;
  animation-delay: calc(var(--i) * 35ms / var(--cc-speed));
}
@keyframes ccWave { 40% { transform: translateY(calc(-7px * var(--cc-intensity))); color: var(--cc-accent); } }
@media (prefers-reduced-motion: reduce) { .CCWave .CCWave-l { animation: none !important; } }
Show the JavaScript
document.querySelectorAll(".CCWave").forEach(function (el) {
  if (el.dataset.ccWave) return; el.dataset.ccWave = 1;
  var targets = el.matches("button, h1, h2, h3, .CCBadge") ? [el] : [].slice.call(el.querySelectorAll("h3, a, [role=tab]"));
  targets.forEach(function (t) {
    [].slice.call(t.childNodes).forEach(function (node) {
      if (node.nodeType !== 3 || !node.textContent.trim()) return;
      var box = document.createElement("span");
      if (!t.hasAttribute("aria-label")) t.setAttribute("aria-label", t.textContent.trim());
      box.setAttribute("aria-hidden", "true");
      node.textContent.split("").forEach(function (ch, i) {
        var s = document.createElement("span"); s.className = "CCWave-l"; s.style.setProperty("--i", i); s.textContent = ch; box.appendChild(s);
      });
      t.replaceChild(box, node);
    });
  });
});

Pairs well with

Avoid on the same element Howl Glitch (text), Text Scramble (text), Text Roll (text), Squiggle (text), Focus Blur (text), Flip (text).

Browser support

Chrome & Edge0+
Safari0+
Firefox0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • The real label stays the accessible name; the letters are hidden from screen readers.
  • Plays on keyboard focus too.
  • Holds still under reduced motion.

Performance

  • 1.2 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Letter Wave

What is a letter wave animation?

Each letter of the label rises in turn, like a wave passing through, and catches the accent colour at its peak. Letter Wave is a free letter wave animation, also known as wavy text hover or staggered letter animation, that works on buttons, tab bars, dropdowns, cards and more.

How do you make a letter wave animation in CSS?

Script splits each label into letters and gives each one its index as --i. One keyframe lifts a letter and tints it, then sets it down with a little overshoot. Each letter's animation-delay is its index times 35ms, so the lift travels along the word.

How do I add Letter Wave to a button?

Add the class CCWave next to CCButton, inside an element with the CCTheme class, then include the Letter Wave CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Letter Wave need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Letter Wave?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Letter Wave accessible?

The real label stays the accessible name; the letters are hidden from screen readers. Plays on keyboard focus too. Holds still under reduced motion.

Can I use Letter Wave in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCWave to a button or block, and paste the JavaScript into the footer code area.

Is Letter Wave free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.