Typewriter
A component that types out a text, one letter at a time.
We're born 🌞 to
Source code
Copy and paste the following code into your project:
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 framer-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[] | - | The text or array of texts to be displayed and animated |
| speed | number | 50 | Speed of typing animation in milliseconds |
| initialDelay | number | 0 | Delay before typing starts in milliseconds |
| waitTime | number | 2000 | Time to wait before deleting text in milliseconds |
| loop | boolean | true | Whether to loop through the texts |
| deleteSpeed | number | 30 | Speed of delete animation in milliseconds |
| className | string | undefined | Additional CSS classes for styling |
| showCursor | boolean | true | Whether to show the cursor |
| hideCursorOnType | boolean | false | Whether to hide the cursor when typing |
| cursorChar | string | React.ReactNode | "|" | Character or node to use as cursor |
| cursorAnimationVariants | { initial: Variants["initial"]; animate: Variants["animate"] } | { initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: 0.01, repeat: Infinity, repeatDelay: 0.4, repeatType: "mirror" } } } | Framer Motion variants for cursor animation |
| cursorClassName | string | "ml-1" | Additional CSS classes for cursor styling |