Logo

Reveal and timing

Block-level strategy (when a table row, code line, or list item becomes eligible) is internal. What you configure is how flowing text enters, how long those entrances last, and how prefers-reduced-motion is handled.

Character or word

reveal defaults to "character". Ordinary prose, headings, and list item text then enter by Unicode grapheme, so emoji and combined characters stay intact. Smoothstream waits for a complete word of geometry before starting that word, which keeps partial words from wrapping, then jumping to the next line.

Inline code follows the same character setting and reserves the unrevealed word’s width without extending the code background. This keeps the line stable while the code text and its background grow.

Set reveal="word" to admit each complete word as one unit. The overall cadence still follows interval; words are grouped, not sped up.

<Smoothstream reveal="word" receiving={receiving}>  {text}</Smoothstream>

Fenced code still commits lines while input is open, then reveals each admitted line using the same character or word setting.

Cadence and duration

OptionDefaultRole
interval3Base delay in milliseconds between presentation units.
duration1000Milliseconds spent on each text entrance. Also used for table-row fades, image entrances, and related motion.
<Smoothstream interval={3} duration={1000} receiving={receiving}>  {text}</Smoothstream>

In React, changing interval, duration, mode, or reveal remounts playback. In Vue, those changes rebuild the session. In the DOM adapter they are constructor-only. Set them once per response.

Lower interval to admit text faster; lower duration to shorten each entrance. Entrances overlap, so a 1000 ms duration does not mean waiting one second between characters. Both numbers must be finite and non-negative. These options do not bypass Markdown stabilization or resource readiness.

Reduced motion

reducedMotion is an accessibility policy. It is not a synonym for mode="static".

ValueBehavior
"system" (default)Follow prefers-reduced-motion.
"always"Always use Smoothstream’s reduced-motion path.
"never"Ignore the system preference and allow animation.

When motion is reduced, Markdown stabilization still runs, but currently safe content renders immediately as semantic HTML: no character pacing, reveal spans, fades, or layout transitions. Unresolved images stay real, accessibly hidden <img> elements and do not delay later blocks.

Once a mounted response enters reduced mode, it stays reduced so visible text cannot replay if the preference changes. A new instance picks up the policy in effect at mount.

Interactive feedback such as the code copy control can still move under mode="static" when the reduced-motion policy allows it. Use static mode for completed content, and reduced motion for motion preference.

See Accessibility for completion announcements and guidance on surrounding live regions, or How Smoothstream works for the scheduling model.

© 2026 Smoothstream. All rights reserved.

Built withRadiant Docs