Text morphPro
Morphs one short label into another: letters both share glide to their new place, the rest fade. For labels that change in place, such as Run to Running or Copy to Copied.
On this page
ProRun, Copy and Deploy buttons whose labels morph through their states.
Installation
Usage
import { TextMorph } from "@/components/ui/chatcn/pro/text-morph"
<Button>
<TextMorph reserve={["Copy", "Copied"]}>{copied ? "Copied" : "Copy"}</TextMorph>
</Button>The longest common subsequence decides which letters survive, so Send to Sending keeps all four letters and adds three. Pass every label the slot can show as reserve and the box holds the widest one: the button around it never changes size. Without it the box takes the new width at once while the letters glide.
Never use it on streamed model output. It is for short UI labels only.
Examples
Status labels
ProConnect to Connected, Index to Indexed, Stop to Stopped and Upload to Uploaded, in reserved boxes.
Props
| Prop | Type | Notes |
|---|---|---|
children | string | Required. The current label |
reserve | string[] | Every label the slot can show. The box holds the widest |
align | "start" | "center" | "end" | Where the text sits in a reserved box. Default center |
duration | number | Glide duration in ms. Default 260 |
Accessibility
- The letters are hidden from assistive tech and a visually hidden copy holds the label, so a button still gets one clean accessible name.
- Letters are laid out in their own script direction, so a Latin label reads correctly on a right-to-left page. Joining scripts such as Arabic cannot be split into letters and swap as a whole.
Motion
- Shared letters move with
transformover 260 ms (FLIP), measured from where they are on screen, so a morph interrupted halfway continues from there. - New letters fade in after a short delay; leaving letters fade out over about 160 ms where they stood.
- Under reduced motion the label swaps instantly.