Text Reveal (Chars)
DisplayMITCharacter-by-character text reveal animation for headlines.
bun add @otfdashkit/ui
Preview
Text Reveal (Chars)Display
Loading Storybook preview…
Code
@otfdashkit/uiimport { TextReveal } from '@otfdashkit/ui'
export function Example() {
return (
<TextReveal
mode="chars"
text="Design System"
className="text-3xl font-bold text-foreground"
/>
)
}
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 |