StellarUI

<stellar-typewriter>

typing animation with configurable timing, optional looping, viewport start, and a property-only restart hook.

Restart

Copy

<stellar-typewriter

  text="Ship the reset branch.
Keep the docs honest."
  with-cursor
  loop
>
</stellar-typewriter>

Complete props, events, slots, and implementation notes for the shipped typewriter surface.

Prop	Type	Default	Notes
`text`	`string`	`''`	The source text to type. Multiple lines are separated by `delimiter`.
`delimiter`	`string`	`\n`	Separator for multiple lines inside `text`.
`speed`	`number`	`50`	Average milliseconds between typed characters.
`delay`	`number`	`250`	Delay before the animation starts.
`start-on-view`	`boolean`	`false`	Starts typing only after the component enters the viewport.
`with-cursor`	`boolean`	`false`	Shows the blinking cursor while the animation is active.
`loop`	`boolean`	`false`	Erases the finished line(s) and starts again.
`loop-delay`	`number`	`2000`	Pause before erasing when looping.
`pause`	`boolean`	`false`	Pauses typing or erasing at the current point.
`ignore-reduced-motion`	`boolean`	`false`	Allows the animation to run even when the user prefers reduced motion.
`--cursor-color`	`CSS custom property`	`currentColor`	Cursor color when `with-cursor` is enabled.
`--cursor-width`	`CSS custom property`	`1.5px`	Cursor thickness.

Event	Source	Notes
`complete`	`stellar-typewriter`	Fires each time a line finishes typing. In loop mode that means the event fires on every completed pass.

Slot	Notes

The public tag is `stellar-typewriter`, matching the component's text-prop driven contract rather than a slotted rich-text surface.
The source text lives in the `text` prop. Multiple lines are split by `delimiter` and typed one line at a time.
`complete` fires whenever a line finishes typing, even when looping will immediately continue into erase-and-restart behavior.
The host exposes a property-only `restart()` method so callers can replay the animation without mutating the text or timing props.
When reduced motion is respected, the component still advances through the same line/loop flow, but it skips the character-by-character typing and erasing steps.