Text Ripple
A 3D character ripple with a traveling color crest, CSS-only and GPU-light.
textripple3dheadlineanimationtypographywave
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. |