Text Reveal (Chars)
DisplayCharacter-by-character text reveal animation for headlines.
Text Reveal (Chars)Display · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Text Reveal (Chars) from @otfdashkit/ui.
Code
// Text Reveal (Chars) — Character-by-character text reveal animation for headlines.
//
// Install:
// bun add @otfdashkit/ui
import { TextReveal(Chars) } from '@otfdashkit/ui'
export function Example() {
return (
<TextReveal(Chars)>
{/* your content */}
</TextReveal(Chars)>
)
}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 |