Intro
Typewriter is a fully configurable animated text component for Elements. Unlike basic typewriter effects, it supports multiple animated strings in sequence, sharing a consistent style while each carrying its own message. 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.
Try the Typewriter
Interactive demo of the Typewriter plugin for Elements
ⓘ This is a simplified simulator showcasing only the main features of the Typewriter, just enough to get a feel for how it works.
Typewriter Options
Content
✓ Define what the Typewriter displays, animated text, optional static text before and after, and up to four sequential strings.
Text Before - optional static text before the animation, with independent color and opacity.
TypeWriter - the main animated text field, supports multi-line content.
Box Height - fixes the component height to the full text block, preventing layout shifts.
Text After - optional static text after the cursor, with independent color and opacity.Text Before and After are not compatible with Ghost Text - overlap may occur.
✓ Ghost Text - available with Box Height active. Displays a faint trace of the animated text. Color, opacity, blur and shadow are configurable.
Multi-String Height: When multiple strings are active, the fixed height is calculated from the longest string, ensuring all surrounding elements stay correctly positioned regardless of which string is currently animating.
Multiple Strings
✓ When more than one string is active, the Typewriter cycles through them in sequence with pause and fade between each.
Second String - activates a second animated text field.
Third String - activates a third animated text field.
Fourth String - activates a fourth animated text field.
Animation
✓ Full control over timing, rhythm and playback. Every parameter works independently for precise choreographic control.
Start - on page load or when the component enters the viewport.
Start Delay - pause before the animation begins.
Typing Speed - total duration of the typing animation.
Inertia - adds progressive deceleration to the typing rhythm.
Easing - sets the direction of the inertia curve: Ease In, Ease Out, or Ease In-Out.
Repeat - number of full cycles. Set to 0 for infinite loop.
Pause - time the completed text stays visible before transitioning.
Fade Out - fade duration between strings or cycles. Not available with Reverse active.
Reverse - each string types forward then deletes itself before the next begins. Delete Speed and Pause after delete are independently configurable.
Reverse requires at least two strings or a loop count greater than 1.
Text Style
✓ Familiar Elements text controls. One addition: Word Spacing, for extra control over the space between words.
Text Align - left, center or right.
Font - from your theme font settings.
Size - responsive size from your theme scale.
Weight - from Thin to Black, nine steps.
Spacing - letter spacing from Tighter to Widest.
Line Height - from compact to loose vertical rhythm.
Word Spacing - space between words & Italic
Text Shadow - configurable text shadow.
Case - Normal, Uppercase, Lowercase, Capitalize, Small Caps.
Underline - Underline, Overline, Line Through, or none.
Text Color
✓ Choose between a solid theme color or a clipped image displayed through the letterforms.
Image source: Drag image Resource or add external URL
Color / Opacity - standard theme color with opacity control.
Use Image - clips any image or animated GIF/WEBP into the text.
Position, size and repeat configurable.
Text Offset - letter outline from 0 to 5px.
TW Background - colored background behind the animated text, with padding, borders, radius and shadow.
Text Background
✓ Tipewriter Background - colored background behind the animated text, with padding, borders, radius and shadow. Option available with flat text color.
Background - Color and opacity
Lateral Padding
Standard Element Borders opitons
Box Shadow
Typing Cursor
✓ The cursor is a fully styled element, shape, size, color and rhythm are all configurable.
Blink Speed - rhythm of the cursor blink.
Thickness - from hidden to 30px wide.
Distance - horizontal spacing between text and cursor.
Radius - rounded corners on the cursor shape.
Padding Y - vertical extension beyond the text height.
Hide Cursor: To hide the cursor simply set the width to 0px.
Second Color - two-tone cursor with independent color, creating visible contrast between blink states.
Add Text - Add a short text or symbol like → ➜ ⮕ | \ / ...
Spacing
✓ Padding around the entire component. Default is zero for maximum layout flexibility.
Transforms
✓ Apply CSS transforms to the entire component block.
Standard Transform Elements panel
Enable - activates all transform controls.
Origin - transform reference point.
Scale - percentage scaling.
Rotate - rotation in degrees.
Translate - horizontal and vertical offset using any valid CSS value.
Skew - horizontal and vertical skew in degrees.
Advanced
✓ CSS Classes, add custom Tailwind or external CSS classes to the component wrapper.
Info
✓ Info & tips about the component.