How low should the opacity drop?

About 35 percent. Lower reads as letters dropping out, and someone will report it as a bug.

Can a shimmer sit on a button?

No. A pulse on a control reads as waiting. People hover it and expect nothing to work yet.

How many words can take it?

Two or three. A wave across a sentence never resolves, so the eye keeps going back to it.

Is this a gradient sweep?

No. This moves opacity, one letter at a time. The site ships no gradients, so nothing travels across the fill.

What does reduced motion do?

Leave the word still, at full opacity.

Text shimmer wave

A quiet pulse that travels through the letters and back again.

TextBuild difficulty: Easystagger yoyo

Also called Letter wave, Shimmer.

Here it is working.

Motion

A soft wave through the letters. It keeps going until you leave.

For designers

A shimmer is an idle state, so it has to survive being watched for a minute. That rules out a strong peak. Drop the letters to about 35 percent opacity, no lower, and travel the wave on a sine so there is no visible start or stop. It belongs on a word that is already the quietest thing on the screen. Put it on a button and it reads as a loading state, which is the one thing a control must never claim by accident. Two or three words at most, and one shimmer per view. On reduced motion, leave the word still.

Use this when

A short word can sit and breathe
You want motion that loops without shouting
Idle state on a hero, not a call to action

Reach for something else when

A button. Shimmer on a control feels cheap.
A paragraph. The wave never ends, and that is the problem.
You wanted a colour gradient. We do not ship gradients here.

How to build it

Split into chars. Tween opacity down a little, stagger with repeat -1 and yoyo. Ease sine. Reduced motion: leave the word still.

Official GSAP

SplitText + stagger yoyo.

gsap.to(split.chars, { autoAlpha: 0.35, stagger: { each: 0.06, repeat: -1, yoyo: true }, duration: 0.35, ease: 'sine.inOut' });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

How low should the opacity drop?: About 35 percent. Lower reads as letters dropping out, and someone will report it as a bug.
Can a shimmer sit on a button?: No. A pulse on a control reads as waiting. People hover it and expect nothing to work yet.
How many words can take it?: Two or three. A wave across a sentence never resolves, so the eye keeps going back to it.
Is this a gradient sweep?: No. This moves opacity, one letter at a time. The site ships no gradients, so nothing travels across the fill.
What does reduced motion do?: Leave the word still, at full opacity.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Text morph