Simple Typewriter Text Effect

Transform static text into a dynamic, engaging typing experience. This lightweight, performance-optimized component is perfect for hero sections, landing pages, and interactive headers.

Overview

The Simple Typewriter Text Effect is a "plug-and-play" block that adds a typewriter animation to any Text or Title widget. It is designed with Developer Experience (DX) in mind, requiring zero configuration for basic use while offering granular control for advanced scenarios.

Key Features

• Smart Content Detection: Automatically animates whatever text you place inside its placeholder. No need to map variables if you only have one phrase.

• Multi-Phrase Support: Easily cycle through a list of sentences or keywords by providing a comma-separated string.

• Smart Cursor Styling: The animated cursor (|) is built with CSS currentColor, meaning it automatically inherits the font size, weight, and color of your text.

• Auto-Cleanup: The cursor automatically disappears when the animation finishes (if Loop is set to False), keeping your UI clean.

• Zero Dependencies: Pure JavaScript and CSS. No external libraries, ensuring a tiny footprint and maximum compatibility.