Typewriter
A component that types out a text, one letter at a time.
We're born 🌞 to
Installation
1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/typewriter.json"
Usage
As a text, either a string or an array of strings can be passed to the component. The component will automatically split the text into an array of characters, and animate each letter one by one. If you pass an array of strings, the component will animate one text, delete it, then continue animating the next one. The component will loop through the texts if you set the loop prop to true.
The cursor at the end of the text is optional. You can use a character or even a svg node if you like. There is a prop to customize the cursor animation, where you have to define the two motion variants as initial and animate.
Ideally, the component should respect multiple lines. If you experience otherwise, please let me know.:)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | string[] | - | Text or array of texts to type out |
| as | ElementType | "div" | HTML Tag to render the component as |
| speed | number | 50 | Speed of typing in milliseconds |
| initialDelay | number | 0 | Initial delay before typing starts |
| waitTime | number | 2000 | Time to wait between typing and deleting |
| deleteSpeed | number | 30 | Speed of deleting characters |
| loop | boolean | true | Whether to loop through texts array |
| className | string | - | Optional class name for styling |
| showCursor | boolean | true | Whether to show the cursor |
| hideCursorOnType | boolean | false | Hide cursor while typing |
| cursorChar | string | React.ReactNode | "|" | Character or React node to use as cursor |
| cursorAnimationVariants | { initial: Variants["initial"]; animate: Variants["animate"] } | See description | Animation variants for cursor. Default: { initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: 0.01, repeat: Infinity, repeatDelay: 0.4, repeatType: "reverse" } } } |
| cursorClassName | string | "ml-1" | Optional class name for cursor styling |