Usage

Smooths bursty streamed text into a steady character-by-character reveal using requestAnimationFrame. Decouples arrival rate from display rate. Advances on grapheme boundaries, so a slice never cuts a surrogate pair, a flag, or a joined emoji in half. Animation timing comes from the --astryx-duration-fast-min motion token, with a fallback outside a theme provider. Snaps to full text when isStreaming becomes false, and stays on the full text while the reader prefers reduced motion.

Pass the accumulated text, not individual chunks; the hook handles the incremental reveal itself. displayedText is a ComputedRef<string>, so render it straight away.

import { useStreamingText } from '@astryx-vue/core'
import { ref } from 'vue'

const targetText = ref('')
const isStreaming = ref(true)
const displayedText = useStreamingText(targetText, isStreaming, { speed: 'natural' })

Best practices

Guidance	Practices
Do	Pass the accumulated text (not individual chunks) as targetText; the hook handles incremental reveal internally.
Do	Set isStreaming to false when the stream completes to snap to the final text.
Do	Use speed="instant" for non-animated contexts like search results or when reduced motion is preferred.
Don't	Use for static text that does not change; the hook adds unnecessary overhead for non-streaming content.

Examples

Common configurations, variations, and states.

useStreamingText — Streaming Response

Assistant response

Streaming

Smooth bursty generated text into a steady reveal with useStreamingText.