TextProNew
Text Morph
When the word changes, shared letters glide to their new spots and the rest fade. Lively on buttons and headings.
Customize
gradientFrom
gradientTo
Based on Text Morph (MIT license) · Terms of use
Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | string | — | The current text. When it changes, shared letters slide to their new places. |
| as | React.ElementType | "p" | HTML tag of the wrapper. |
| variants | Variants | — | Custom enter and exit variants for letters. |
| transition | Transition | — | Custom spring or duration for the letter moves. |
| gradientFrom | string | "#ffffff" | Colour of the first letter. The text fades into the gradient end colour. |
| gradientTo | string | "#d4d4d8" | Colour of the last letter, the end of the gradient. |
| style | CSSProperties | — | Wrapper styles. |
| className | string | — | Tailwind classes for the wrapper. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge