TextProNew
Vertical Cut Reveal
Letters or words slide up one by one from under an invisible line, with a spring. Made for hero sections and headings.
Customize
gradientFrom
gradientTo
Based on Vertical Cut Reveal (MIT license) · Terms of use
Props
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The text to reveal. |
| splitBy | 'words' | 'characters' | 'lines' | string | "words" | How the text is split: by words, characters or lines. |
| staggerDuration | number | 0.2 | Delay between text parts, in seconds. |
| staggerFrom | 'first' | 'last' | 'center' | 'random' | number | "first" | Which letter the wave starts from. |
| reverse | boolean | false | Slide down from above instead of up from below. |
| autoStart | boolean | true | Start the animation on mount. |
| transition | AnimationOptions | "{ type: 'spring', stiffness: 190, damping: 22 }" | Spring settings, a delay can be added here. |
| containerClassName | string | — | Classes for the outer element. |
| wordLevelClassName | string | — | Classes for each word wrapper. |
| elementLevelClassName | string | — | Classes for each letter or word. |
| onStart / onComplete | () => void | — | Called when the animation starts and ends. |
| ref | { startAnimation(): void; reset(): void } | — | Start and reset the animation by hand, e.g. on scroll. |
| 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. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge