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 thedurationfor 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