Typewriter
DisplayMITCharacter-by-character typewriter text animation with configurable speed.
bun add @otfdashkit/ui
Preview
TypewriterDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { Typewriter } from '@otfdashkit/ui'
export function Example() {
return (
<div className="text-2xl font-semibold text-foreground">
Build with{' '}
<Typewriter words={['speed', 'quality', 'design', 'confidence']} className="text-primary" />
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Typewriter source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| wordsrequired | string[] | Array of strings to cycle through | |
| as | 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'span' | |
| className | string | ||
| cursor | boolean | true | Show cursor (default true) |
| cursorChar | string | '|' | Custom cursor character (default '|') |
| deleteSpeed | number | 30 | Deleting speed in ms per character (default 30) |
| loop | boolean | true | Whether to loop (default true) |
| pauseAfter | number | 1800 | Pause after finishing a word in ms (default 1800) |
| style | CSSProperties | ||
| typeSpeed | number | 60 | Typing speed in ms per character (default 60) |