Text Reveal (Words)
DisplayMITWord-by-word text reveal animation triggered on scroll.
bun add @otfdashkit/ui
Preview
Text Reveal (Words)Display
Loading Storybook preview…
Code
@otfdashkit/uiimport { TextReveal } from '@otfdashkit/ui'
export function Example() {
return (
<TextReveal
mode="words"
text="Every template ships with extraordinary design, production-ready SDK, and AI-tool integration baked in."
className="text-xl text-foreground max-w-md"
/>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
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 |