TextNew
Text Effect
Text reveals word by word or letter by letter: from blur, scale or slide. Five ready presets.
Customize
gradientFrom
gradientTo
Based on Text Effect (MIT license) · Terms of use
More in Pro
View allProps
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | string | "Build something people remember" | The text to reveal. |
| per | 'word' | 'char' | 'line' | "word" | Split by word, character or line. |
| preset | 'blur' | 'fade-in-blur' | 'scale' | 'fade' | 'slide' | "fade" | Ready-made reveal style. |
| delay | number | 0 | Delay before start, in seconds. |
| speedReveal | number | 1 | How fast the parts follow each other. |
| speedSegment | number | 1 | How fast a single part animates in. |
| trigger | boolean | true | Show the text. false hides it with an exit animation. |
| as | keyof JSX.IntrinsicElements | "p" | HTML tag of the wrapper. |
| variants | { container?: Variants; item?: Variants } | — | Custom Motion variants instead of a preset. |
| segmentWrapperClassName | string | — | Classes for each part's wrapper. |
| onAnimationComplete | () => void | — | Called when the reveal finishes. |
| className | string | — | Tailwind classes for the wrapper. |
| gradientFrom | string | "#ffffff" | Colour of the first piece of text. The text fades into the gradient end colour. |
| gradientTo | string | "#d4d4d8" | Colour of the last piece, the end of the gradient. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge