Text morph
Morph a label into its next state, letter by letter.
pnpm dlx shadcn@latest add @uiarc/text-morphLive · keyboard ready
- Status words that change a few letters at a time, such as Follow and Following.
- Custom buttons or badges that need a morphing label without the rest of the button.
- Inline counters or short state labels that should glide instead of jump.
- Use word-rotate for a sentence with one cycling word.
- Use button or action-swap when you want the morph plus button behaviour.
- Avoid it for text that wraps, since it always renders a single line.
Installation
Add Text morph with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/text-morphAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { TextMorph } from "@/registry/components/text-morph/text-morph"; export function PublishButton({ state }: { state: "idle" | "busy" | "done" }) { const label = state === "idle" ? "Publish" : state === "busy" ? "Publishing" : "Published"; return ( <button type="button"> <TextMorph>{label}</TextMorph> </button> );}TextMorph
Morphs one short label into the next in place. Shared letters glide, new ones sharpen in, removed ones blur away, and the width springs to fit.
PropTypeDefaultDescription
childrenRequiredstring–The current label. Change it to morph.as"span" | "div" | "p" | "strong" | "h1" | "h2" | "h3""span"Rendered element.classNamestring–Applied to the rendered element.idstring–Forwarded to the rendered element.- The plain label is in a visually hidden span; the animated glyphs are aria-hidden.
- It does not announce changes. Wrap it in your own aria-live region if a status change must be announced.
- Letters are matched by character and occurrence, so shared letters glide to their new positions on a spring while new letters stagger in with a blur.
- The frame width springs to the new label; font loading or resizes follow immediately without animating.
- Reduced motion swaps the label and width instantly.
- The frame width springs to each label, and a ResizeObserver follows font loading and container resizes without animating.
- The label never wraps, so keep it short in narrow layouts.
- Every character is a motion span with layout animation; keep labels to a few words.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for status words that change a few letters at a time (Follow / Following, Save / Saved). For a sentence with a cycling word use word-rotate.
- Keep labels to one short line; it never wraps.
The full library index for assistants is at /llms.txt.