Text Morph

#Installation

#Usage

import { TextMorph } from "@/components/ui/text-morph"

<TextMorph>{status}</TextMorph>

#Examples

#When to use it

Characters present in both strings keep their identity and slide to their new positions, so the change reads as the same word rearranging rather than one word replacing another. The effect depends entirely on how much the two strings share.

#Behaviour

• Exits run at 60% of the entrance. Clearing the old characters is the system responding; reading the new ones is what the reader is here for.
• Splits by grapheme, so a combining accent stays with its letter and a multi-codepoint emoji stays whole. Repeated characters keep distinct identities.
• No per-character stagger. At a delay long enough to read as a cascade, a ten-character word would spend longer staggering than the whole transition has to spend.

#Accessibility

• The resting DOM is a single text node. The split lasts only for the morph, so the rest of the time the text stays selectable, findable with find-in-page, and wrappable at word boundaries.
• Split characters carry aria-hidden. A screen reader spells out a run of one-character elements, so an sr-only node carries the reading instead.
• Reduced motion never splits the text. The change still gets a short crossfade, so it reads as one word becoming another rather than as a blink.

#API Reference