Gradient Wave Text

A line of text with bands of color that pass through it from the bottom up, then settle on one base color. The colors are clipped to the letters, so the background stays yours.

What you can change

• The text, font and alignment. Text wraps to fit the frame.

• The gradient shape: radial, spreading from below the text, or linear, rising straight up. Bottom Offset moves the radial center further down.

• Up to 12 colors, 2 to 24 bands, the gap between bands, and the base color. With more bands than colors, the colors repeat.

• Speed from 0.1x to 4x, a start delay of up to 10 seconds, and a Paused switch.

• Whether it loops or plays once, and whether it starts on page load or when scrolled into view.

Where it fits

Hero headlines and section titles on dark pages, where one line should draw the eye.

Good to know

• The default base color is white. On a light section, change it or the text will disappear.

• The sweep doesn't run on the Framer canvas, so use Preview to see it. Visitors who ask for reduced motion get still text.

• When looping, the text rests on the base color for a few seconds at the default speed before the next sweep.