TextTransformer

Usage

Basic

When the text color changes with the value, set it on the root; under fade the outgoing layer fades out in its old color.

Morph and Fade

The default morph animates per character and rolls digits by place value; fade is a whole-string blur crossfade, the only mode blurPx applies to.

With AutoSizer

Inside TxAutoSizer, wrap the change in action(() => …) and the size follows the text; with wrap=false, overflow is clipped.

Long Text / Chapter Switch

wrap breaks multi-line text with pre-line and forces fade.

Title and Subtitle

Status Text

Best Practices

• Use it for labels, titles, badges, and occasional state changes, not for streaming tokens or per-frame counters.
• Use TxTextMorph directly when you only need the morph; it adds springs, numbers, locale, and cursorIndex.
• Keep the durations equal when paired with TxAutoSizer; morph animates its own size, so an outer sizer is usually redundant.
• Keep wrap=false in compact buttons and badges; turn wrap on only for paragraph or chapter changes.
• Keep slot content light and derived only from the provided text: during a fade, both layers render it.

API Reference

Props

Slots

Overview

• The default slot or wrap overrides mode and forces fade: the engine morphs only plain text and measures on a single line.
• The root is aria-live="polite". Under morph the whole value sits in a visually hidden [tx-morph-sr] node; under fade the old layer is aria-hidden, so only the current text is announced.
• fade with wrap=false truncates to one line with an ellipsis; under morph the root is overflow: visible so exiting segments aren't clipped, and nothing is truncated.
• Under fade, the new layer lands in a transparent, blurred setup state, one style commit is forced, and the transition starts on the next frame; the old layer is removed after durationMs + 34ms.
• A newer change cancels the previous timer and animation frame, so a stale transition never removes the current layer.
• Under reduced motion, neither layer transitions; the new text replaces the old at once.

Technologies

• morph renders TxTextMorph (see TextMorph); fade renders two layers whose CSS transitions read --tx-tt-duration and --tx-tt-blur.
• Source: packages/tuffex/packages/components/src/text-transformer/.