TextNew
Wave Reveal
A heading appears in a wave: letters slide in one by one and come out of a blur. Pure CSS.
Customize
gradientFrom
gradientTo
Based on Wave Reveal (MIT license) · Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | Heading text. |
| direction | 'up' | 'down' | "down" | Where the letters come from. |
| mode | 'letter' | 'word' | "letter" | Reveal by letter or by word. |
| duration | string | "2000ms" | Reveal duration, e.g. 2000ms. |
| delay | number | 0 | Delay before the start, in milliseconds. |
| blur | boolean | true | Letters come out of a blur, like at WWDC. |
| letterClassName | string | — | Classes for each letter or word. |
| className | string | — | 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. |
Dependencies
2 required packages
npm install clsx tailwind-merge