Components

Streaming Text

Reveals a passage token-by-token, LLM-style, with a blinking caret that stops when complete.

php artisan blatui:add streaming-text

BlatUI streams this passage the way a language model would — one token at a time, with a blinking caret that stops the moment the response is complete.

<p class="max-w-prose text-base leading-relaxed">
    <x-ui.streaming-text
        text="BlatUI streams this passage the way a language model would — one token at a time, with a blinking caret that stops the moment the response is complete."
    />
</p>

By Word

Revealing the passage word by word feels deliberate and easy to read — handy for short, punchy lines.

{{-- Reveal whole words at a time instead of single characters. --}}
<p class="max-w-prose text-base leading-relaxed">
    <x-ui.streaming-text
        by="word"
        :speed="90"
        text="Revealing the passage word by word feels deliberate and easy to read — handy for short, punchy lines."
    />
</p>

Fast

At six milliseconds per character the text races in almost instantly — great for longer answers you still want to feel live.

{{-- A lower speed (ms per chunk) streams the text quickly. --}}
<p class="max-w-prose text-base leading-relaxed">
    <x-ui.streaming-text
        :speed="6"
        text="At six milliseconds per character the text races in almost instantly — great for longer answers you still want to feel live."
    />
</p>

No Caret

Without the caret the passage simply fades in token by token, leaving no trailing cursor once it finishes.

{{-- Hide the blinking caret with :caret="false". --}}
<p class="max-w-prose text-base leading-relaxed">
    <x-ui.streaming-text
        :caret="false"
        text="Without the caret the passage simply fades in token by token, leaving no trailing cursor once it finishes."
    />
</p>

API Reference

Props, slots and exposed methods for <x-ui.streaming-text>.

Props

Prop	Type	Default	Description
`text`	`string`	`''`	The full passage to reveal. If omitted, the slot content is used as the text instead.
`by`	`string`	`'char'`	Reveal granularity: one character at a time, or whole words at a time. `char` `word`
`speed`	`int`	`18`	Milliseconds between each revealed chunk. Lower is faster.
`startDelay`	`int`	`0`	Milliseconds to wait after init before the first chunk appears.
`caret`	`bool`	`true`	Show a blinking caret at the end of the text while streaming. Hides once the passage finishes.
`autostart`	`bool`	`true`	Begin streaming automatically on init. Set false to hold until you call start() from script.

Slots

Slot	Description
`default`	Fallback source for the passage when the text prop is not set; its tags are stripped to plain text. The complete passage is also rendered up front in an sr-only aria-live region for screen readers, SEO, and no-JS.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`start()`	Begins streaming from the current position. No-op if already started or finished; useful with autostart=false.
`finish()`	Immediately reveals the full passage and marks the stream done.