The TextWriter component creates a typing animation effect for text, where characters appear one by one to mimic real-time typing.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/text-writer.jsonEverything Text Writer accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| text (required) | string | No default | The text to be animated |
| delay | number | 0.05 | Time delay between each character (in seconds) |
| className | string | '' | Additional CSS classes for styling |
| animationConfig | AnimationProps | {} | Custom Framer Motion animation configuration |
| cursorColor | string | 'currentColor' | Color of the typing cursor |
| cursorWidth | string | '2px' | Width of the typing cursor |
| cursorStyle | string | 'solid' | CSS border-style of the cursor |
| onComplete | () => void | () => {} | Callback function executed when typing is complete |
| eraseOnComplete | boolean | false | Whether to erase the text after completion |
| eraseDelay | number | 2000 | Delay before erasing starts (in milliseconds) |
| loop | boolean | false | Whether to loop the writing and erasing effect |
Required.