A typewriter component for Motion Canvas.
demo.mp4
Just copy the Typewriter.tsx file into your project.
Typewriter
extends the Txt
component and you can use all of Txt
's properties and methods, except for text
. Instead, you will use message
to set the text to be typed out.
message
- The text to be typed out.fixWidth
- Sets the width of the textbox to the width of the message to prevent the centered text from moving around as the text is being typed out. Defaults tofalse
.
typewrite()
- Starts the typewriter animation. Optionally, you can pass theduration
for which the typing animation should last for. By default, the typing speed is about 5-6 characters per second, with some randomness added to it.
The code for the demo video above can be found in example.tsx.
MIT