TypingAnimation
Renders text one character at a time with a configurable interval and optional blinking cursor.
When to Use
- Hero headings that reveal themselves letter-by-letter for dramatic effect.
- Terminal-style or command-line UIs.
- Looping taglines — set
Loop=trueto restart after a pause.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| Text | string | "" | The full text to type out character by character. |
| IntervalMs | int | 50 | Delay in ms between each character. |
| DelayMs | int | 0 | Delay before the animation starts. |
| ShowCursor | bool | true | Show a blinking cursor after the typed text. |
| Cursor | string | "|" | The cursor character. |
| Loop | bool | false | When true, restarts the animation after the text is fully typed. |
| LoopPauseMs | int | 1500 | Pause in ms after full text before restarting (Loop only). |
Related Components
- TextReveal — Word-by-word text reveal on scroll.
- AnimatedGradientText — Gradient text with animated hue shift.