Typing Effect
The <pines-typing-effect> component creates a typewriter animation that cycles through an array of strings, typing each one character by character before erasing and moving to the next. Use it in hero sections or landing page headlines to dynamically communicate multiple value propositions — for example, cycling through "Fast", "Reliable", and "Scalable" after a static "We are" lead-in.
Properties
| Attribute | Type | Default | Description |
text-array
|
List<string>
|
new List<>()
|
The list of strings to cycle through. Each string is typed out in sequence, then erased before the next begins. Use short, punchy phrases that work well in a headline context. |
type-speed
|
int
|
110
|
Milliseconds between each character being typed. Lower values produce faster typing; higher values produce a more deliberate, dramatic effect. Defaults to 110ms. |
cursor-speed
|
int
|
550
|
Controls how fast the cursor blinks in milliseconds. Adjust this independently of typing speed to fine-tune the visual rhythm of the animation. Defaults to 550ms. |
pause-end
|
int
|
1500
|
How long the completed string is displayed before erasing begins, in milliseconds. Increase this to give readers more time to absorb each phrase. Defaults to 1500ms. |
pause-start
|
int
|
20
|
How long to wait after erasing before the next string begins typing, in milliseconds. Use a small value for a snappy transition or increase it for a more measured pace. Defaults to 20ms. |