Animation

Animation controls how new content appears. Effects are active only when streaming is enabled; omitting streaming or setting it to false keeps them off. It can be used with smoothing, which controls when received text becomes visible.

Effect input

The following forms describe the streaming.effect option in React, Vue, Svelte, Angular, React Native, Lynx, Solid, and Taro. Custom effects use the same configuration as mapper plugins.

Input	Meaning
`false`	Disable visual effects.
Omitted or `true`	Use `scale` with its default settings.
An effect name, such as `'scale'`	Use that effect with its default settings.
`[name, config]`, such as `['scale', { duration: 250 }]`	Configure a named effect.
`Mapper`	Use a custom mapper with its default options.
`[Mapper, config]`	Configure a custom mapper.
An array, such as `['scale', ['suffix', { type: 'dot' }]]`	Combine named or custom effects.

Available effects

Open an effect below for its live demo and configuration. Effect input describes how to select or combine them.

Effect	What it does
`shad`	Fades the trailing characters with a moving gradient.
`scale`	Grows and fades in newly visible characters while clearing a small blur.
`chunk`	Fades in the new text from each visible update as one group.
`suffix`	Follows the visible content with a cursor, dot, or custom marker.

Each effect page includes a live demo, framework-specific code examples, and its configuration fields. Fields accept plain values or readable closures. Effects run after smoothing; priority controls mapper ordering and disabled excludes an effect.

#Animation

#Effect input

#Available effects

Animation

Effect input

Available effects