Animations
Typewriter Reveal
Text · Type Effects
@sbx/core-ui/components/text/TypewriterReveal.sveltelight
shredbx
eXperimental Lab
dark
shredbx
eXperimental Lab
// Import
TypewriterReveal.svelte typescript
import TypewriterReveal from '@sbx/core-ui/components/text/TypewriterReveal.svelte';
// Spec
User Story
As a visitor, I see text appearing character-by-character with a blinking cursor so the page feels alive and draws my eye to the headline.
Scenario
On mount (optionally after a startDelay), characters reveal one at a time at a fixed cadence. A blinking cursor trails the most recently revealed character. When the full text has been revealed, the component fires an onComplete callback; the cursor can stay or be hidden via the showCursor prop.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | — | Full text to reveal character-by-character. |
| speed | number | 50 | Typing speed in milliseconds per character. |
| startDelay | number | 0 | Delay in milliseconds before the reveal begins. |
| showCursor | boolean | true | Whether to render the trailing blinking cursor. |
| onComplete | () => void | () => {} | Callback fired once the full text has been revealed. |
| class | string | '' | Extra CSS class applied to the container element. |