Text Reveal (Words)
DisplayWord-by-word text reveal animation triggered on scroll.
Text Reveal (Words)Display · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Text Reveal (Words) from @otfdashkit/ui.
Code
// Text Reveal (Words) — Word-by-word text reveal animation triggered on scroll.
//
// Install:
// bun add @otfdashkit/ui
import { TextReveal(Words) } from '@otfdashkit/ui'
export function Example() {
return (
<TextReveal(Words)>
{/* your content */}
</TextReveal(Words)>
)
}Props
Props declared in the TextReveal source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| textrequired | string | The text to reveal | |
| as | 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | |
| autoStart | boolean | true | Whether to start on intersection (default true) |
| className | string | ||
| delay | number | 0 | Base animation delay before first unit starts (ms) |
| duration | number | 500 | Individual item animation duration in ms (default 500) |
| mode | 'words' | 'chars' | 'lines' | 'words' | Reveal mode |
| stagger | number | 50 | Delay between each word/char in ms (default 50) |
| style | CSSProperties |