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
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | string | - | Yes | Text to be animated |
| className | string | - | No | Optional class names for styling the text. |
| maxScale | number | 2 | No | Max Y scale on hover. |
| falloff | number | 0.3 | No | Controls how fast the scale reduces for nearby letters. |