Text Ripple

A animated text effect that scales characters on hover with a ripple animation. Customize the maximum scale and ripple falloff to adjust the intensity and spread of the effect.

Examples

Text Ripple Basic

Simple ripple with default scale and falloff

Labyrinth

Text Ripple with a wider spread

Increases the falloff value to spread the ripple effect farther

Why so serious?

Installation

npx shadcn@latest add "https://ui.rechesoares.com/registry/text-ripple.json"

Component Props

PropTypeDefaultRequiredDescription
childrenstring-YesText to be animated
classNamestring-NoOptional class names for styling the text.
maxScalenumber2NoMax Y scale on hover.
falloffnumber0.3NoControls how fast the scale reduces for nearby letters.