TextTransformer

fade + blur TxAutoSizer “ + ”

Not recommended for high-frequency real-time updates (e.g., streaming text, per-frame state changes). Better for occasional state/title/chapter/short-text changes.

Basic Usage

TextTransformer

Demo loads on client.

Used with AutoSizer

When you want width/height to follow text changes smoothly, wrap TxTextTransformer in TxAutoSizer and trigger a transaction via autoSizerRef.action(() => ...).

If you do not want text to wrap during size animations (vertical/jumping lines), keep wrap=false; overflow will be clipped (overflow: hidden).

AutoSizer + TextTransformer

Demo loads on client.

Long Text / Chapter Switch

Long text chapter

Demo loads on client.

Title + Subtitle

Title + subtitle

Demo loads on client.

Status/Badge Text

Status text

Demo loads on client.

API

TxTextTransformer

Props

Prop	Type	Default	Description
`text`	`string \| number`	-	DisplayContent
`durationMs`	`number`	`240`	Description for durationMs.
`blurPx`	`number`	`8`	Description for blurPx.
`tag`	`string`	`span`	Description for tag.
`wrap`	`boolean`	`false`	Description for wrap.