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.
AI ready
Fully compatible with the Elements AI Assistant. Every option now carries a clear, plain-language description, so the AI understands what each setting does, how the options work together, and the best way to use the component.
Just describe the effect you want. Ask for "a large headline that types three messages in a loop, deleting each one before the next" and the AI sets the strings, Reverse, Repeat and timing for you. It also knows the rules behind the options, such as Ghost Text needing Box Height, or Reverse needing more than one string.
Typewriter Options
Content
✓ Define what the Typewriter displays, animated text, optional static text before and after, and up to four sequential strings.
✓ Ghost Text - available with Box Height active. Displays a faint trace of the animated text. Color, opacity, blur and shadow are configurable.
Multiple Strings
✓ When more than one string is active, the Typewriter cycles through them in sequence with pause and fade between each.
Animation
✓ Full control over timing, rhythm and playback. Every parameter works independently for precise choreographic control.
Text Style
✓ Familiar Elements text controls. One addition: Word Spacing, for extra control over the space between words.
Text Color
✓ Choose between a solid theme color or a clipped image displayed through the letterforms.
Text Background
✓ Tipewriter Background - colored background behind the animated text, with padding, borders, radius and shadow. Option available with flat text color.
Typing Cursor
✓ The cursor is a fully styled element, shape, size, color and rhythm are all configurable.
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
Advanced
✓ CSS Classes, add custom Tailwind or external CSS classes to the component wrapper.
Info
✓ Info & tips about the component.