TextNew
Hyper Text
Letters cycle through random characters and settle into the word. Runs again on hover.
Customize
gradientFrom
gradientTo
scrambleColor
Based on Hyper Text (MIT license) · Terms of use
More in Pro
View allProps
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | string | "CODEARIA" | The text that scrambles and settles back. |
| duration | number | 800 | Scramble duration in milliseconds. |
| delay | number | 0 | Delay before the first run, in milliseconds. |
| animateOnHover | boolean | true | Run the effect again on hover. |
| startOnView | boolean | false | Wait until the text scrolls into view. |
| as | 'div' | 'h1' | 'h2' | 'h3' | 'p' | 'span' | ... | "div" | HTML tag of the wrapper. |
| characterSet | string[] | — | Characters used while scrambling. Latin A–Z by default. |
| className | string | — | Tailwind classes for the wrapper. |
| 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. |
| scrambleColor | string | "#a1a1aa" | Colour of the letters that are still scrambling. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge