Wave Text Effect

<h2 class="wave-text" aria-label="CodeRipple">
  <span>C</span>
  <span>o</span>
  <span>d</span>
  <span>e</span>
  <span>R</span>
  <span>i</span>
  <span>p</span>
  <span>p</span>
  <span>l</span>
  <span>e</span>
</h2>

.wave-text{
  display:flex;
  margin:0;
  color:#ffffff;
  font-size:64px;
  font-weight:800;
  line-height:1.1;
}

.wave-text span{
  display:inline-block;
  animation:waveLetter 1.4s ease-in-out infinite;
}

.wave-text span:nth-child(2){
  animation-delay:.08s;
}

.wave-text span:nth-child(3){
  animation-delay:.16s;
}

.wave-text span:nth-child(4){
  animation-delay:.24s;
}

.wave-text span:nth-child(5){
  animation-delay:.32s;
}

.wave-text span:nth-child(6){
  animation-delay:.40s;
}

.wave-text span:nth-child(7){
  animation-delay:.48s;
}

.wave-text span:nth-child(8){
  animation-delay:.56s;
}

.wave-text span:nth-child(9){
  animation-delay:.64s;
}

.wave-text span:nth-child(10){
  animation-delay:.72s;
}

@keyframes waveLetter{
  0%,
  100%{
    transform:translateY(0);
    color:#ffffff;
  }

  50%{
    transform:translateY(-18px);
    color:#22d3ee;
  }
}

How This Wave Text Effect Works

The Wave Text Effect creates a smooth letter-by-letter animation by giving each character its own span element and applying staggered animation delays.

Each letter uses the same waveLetter keyframe animation, which runs for 1.4s with ease-in-out timing and repeats infinitely.

At the start and end of the animation, every letter stays in its normal position with white text.

At the 50% point, the active letter moves upward with translateY(-18px) and changes to cyan #22d3ee.

The nth-child() selectors add small delays from .08s up to .72s. Because each letter starts slightly after the previous one, the movement travels across the word like a wave. You can learn more about controlling staggered animation timing in the MDN Web Docs guide to CSS animations.

This staggered timing creates the wave effect without requiring JavaScript.

Customizing This Wave Text Effect

You can customize the Wave Text Effect by changing a few CSS values while keeping the same animation structure. The wave height, colors, speed, and stagger timing can all be adjusted.

• Wave height: Change translateY(-18px) to control how high each letter moves.
• Wave color: Replace #22d3ee with another highlight color.
• Text size: Change 64px to make the animated text larger or smaller.
• Animation speed: Adjust 1.4s for a faster or slower wave.
• Stagger timing: Change the .08s delay increments to control how quickly the wave travels between letters.
• Base color: Replace #ffffff with another starting text color.

Where to Use This Wave Text Effect

The Wave Text Effect works well for short headings and labels where continuous letter-by-letter movement can add energy to the design.

• Hero headings: Add motion to short titles or highlighted words.
• Loading screens: Create animated loading text without JavaScript.
• Portfolio websites: Use it for names, project titles, or creative headings.
• Landing pages: Draw attention to featured text or promotional messages.
• Creative websites: Add playful movement to typography-focused layouts.
• Dark interfaces: The cyan wave creates strong contrast against dark backgrounds.

Because the effect uses CSS keyframes, transforms, and staggered animation delays, it remains lightweight while creating movement across individual characters.

If you want another continuously animated typography style, check out the Shimmer Text Effect, which moves a bright gradient across the letters.

Frequently Asked Questions

Does the Wave Text Effect require JavaScript?
No. The entire wave animation is created with CSS keyframes and staggered animation delays.

How does each letter move at a different time?
The nth-child() selectors apply increasing animation delays to each letter, making the movement travel across the word.

Can I change how high the letters move?
Yes. Change the translateY(-18px) value to increase or reduce the wave height.

Can I change the wave animation speed?
Yes. Adjust the 1.4s animation duration and the individual delay values to make the wave faster or slower.

The Wave Text Effect combines staggered timing, vertical movement, and color changes to create a smooth wave across individual letters. Its CSS-only structure keeps it lightweight and easy to customize for hero headings, loading screens, portfolios, landing pages, and creative interfaces.