Typewriter - Animated text component

Hi guys, introduci ’ Typewriter’ a smart component with text animation :smiling_face_with_sunglasses: Designed from the ground up to offer the maximum flexibility for real-world use!

demo1

Unlike basic typewriter effects, it supports multiple animated strings in sequence, each carrying its own message while sharing a consistent visual style. But what makes it genuinely different goes further than that.

typewriter_multithemes_001

demo2

It can start on page load or trigger when the element scrolls into view. Inertia and easing give every character a rhythm that feels intentional, not mechanical.

typewriter_multithemes_004

Combined with Ghost Text for multi-line stability and Reverse mode for choreographic sequences, it delivers a level of expressiveness that goes well beyond a simple typing effect.

demo3

Try Typewriter online!

This is a simplified simulator showcasing only the main features of the Typewriter, just enough to get a feel for how it works. :astonished_face: :+1: try it!

simulator

Key features:

Multiple animated strings

Reverse (delete & retype) mode

Ghost Text for fixed-height layouts

Scroll-triggered or on-load start

Inertia & easing controls (ease-in, ease-out, ease-in-out) cool feature! :smiling_face_with_sunglasses:

Fully customisable cursor — size, colour, radius, spacing

Static text before and after the animated portion

Fade out, loop count, start delay, pause between strings

Image or gradient clipped to text and more

Typewriter is available in the Marketplace!

Now in promo :grinning_face:

thanks!

Very nice work - like it a lot… clever

Thanks Michael, always towards doing things smart :smiling_face_with_sunglasses:

I bought the new MultiThemes TypeWriter component a few days ago and have been testing it on a website I’m currently building. I love it—very well designed and powerful. I plan to use TyperWriter to highlight quotes and call-outs used in collections of articles and essays.

Thanks Michael.

Michael thanks a lot! :folded_hands:

:clap: :100: ..because this is one of the things I’ve spent the most time on to expand its use.

Let me know if you need help.

Regards

Michael, your quick response to my questions and the usefulness of the Typewriter component provide me with creative ways to bring emphasis and liveliness to a text-heavy website.

Yesterday, I spent time going through the demos for MultiThemes Clipboard and Info Popup Pro. These new components along with Typewriter animations certainly exceed what I imagined I could do with my website. Thanks again for these feature-rich components that provide sensible and practical solutions for my web-content needs.

Terry :folded_hands: :face_holding_back_tears:

The components are designed so organically that they can be used together for specific purposes. The Info pop-up design paved the way for all those integrated components that serve to provide precise information. If I can, I’ll also create a demo site where I can see them working together. Thanks again. :folded_hands:

@MultiThemes Which text-to-speech app do you use on your pages?

https://elevenlabs.io model: Alexandra - Conversational and Natural

However, there is a completely free alternative, perhaps a little more cumbersome to achieve good-quality results. https://clipchamp.com/ allows you to use it online for free with a Microsoft account and has a decent speech module. It also directly exports audio clips, even though it’s a video program. It’s a bit of a misuse, but it works and it’s free.

I can vouch for eleven labs - use it every 5 days…

Very happy with results

There’s s slider in voice edit - bring stability - down to 40% instead of 50%

Adds more variety and sounds better…

+1 much depends on your needs and purpose. Costs may increase if you want to improve quality, but in general, if you have average needs, you can work with free products.

However, I also agree that elevenlabs is excellent; if used wisely, it also allows you to optimize costs.

BTW: Elevenlabs also offers a free account, but you don’t have access to Pro voices (though this is less true for English, it’s much more restrictive for other languages).

I use v2 voices - more economical - still really good - for 8-25 minute segments…

For short 1 minute texts I would use the advanced v3 voices

Hope that helps…

Great component for hero-type animation. @MultiThemes always creates something great

Thanks a lot Anas! :folded_hands: