Word Reveal
A headline whose words blur, slide and fade in one by one when scrolled into view, with replay.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
WordRevealProps
Also accepts all props of Omit<React.ComponentProps<"p">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| text* required | string | — | The sentence to reveal |
| stagger | number | 70 | Delay between words in ms |
| duration | number | 700 | Duration of each word's transition in ms |
| blur | number | 8 | Blur radius in px before a word appears |
| offset | number | 14 | Vertical offset in px before a word appears |
| replayKey | number | string | — | Change this value to hide the words and play the reveal again |
| threshold | number | 0.4 | Fraction of the element that must be visible to start |
| once | boolean | true | Only play once. If false the words hide again when scrolled out of view |
Install
$ npx shadcn@latest add https://chromotion.dev/r/word-reveal.json