Text Ripple

A 3D character ripple with a traveling color crest, CSS-only and GPU-light.

textripple3dheadlineanimationtypographywave

Overview

Text Ripple is a React and Tailwind CSS wave text animation where a 3D crest travels through a headline, lifting, turning, and brightening each letter in turn, in Next.js or any React app, with only CSS keyframes. Only transform and color animate, the stagger is animation delay, and every letter shares one timeline. Depth, nudge, scale, rotation, and colors are props. Screen readers get the full text once, it stops when scrolled away or when the tab is hidden, and reduced motion shows a static fill. Keep it to short headlines, since each character is its own animated span.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-ripple

Usage

Import TextRipple from @/components/wensity/text-ripple and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextRipple } from "@/components/wensity/text-ripple";
 2
 3export default function Example() {
 4  return (
 5    <TextRipple
 6      as="h1"
 7      text="Generating code ..."
 8      duration={1}
 9      spread={1}
10      className="font-display text-xl font-normal"
11    />
12  );
13}

Props

Prop	Type	Default	Description
`text`	string	-	The string to render.
`as`	keyof React.JSX.IntrinsicElements	"span"	Tag rendered as the outer element.
`duration`	number	1	Crest travel duration for one character, in seconds.
`spread`	number	1	How tightly the crest packs across characters (0.4–3). Higher = faster stagger.
`zDistance`	number	10	Forward depth of the crest in CSS pixels.
`xDistance`	number	2	Lateral nudge of the crest in CSS pixels.
`yDistance`	number	-2	Vertical nudge of the crest in CSS pixels.
`scaleDistance`	number	1.1	Peak scale at the crest.
`rotateYDistance`	number	10	Peak Y rotation at the crest, in degrees.
`baseColor`	string	theme	Resting fill color. Omit for theme auto (zinc in light, softer zinc in dark).
`rippleColor`	string	theme	Crest highlight color. Omit for theme auto (near-black in light, white in dark).
`paused`	boolean	-	Force the infinite loop paused. When omitted, it runs forever while visible and auto-pauses off-screen or when the tab is hidden.

Featured in React hero section components.