TextMorph

Morphs one short label into the next in place: shared letters glide to their new positions, new letters sharpen in, removed letters blur away, and the width follows on a spring.

When to use

• Status words that change a few letters at a time: Publish / Publishing / Published, Follow / Following, Connect / Connected.
• Inside buttons and pills, so the surrounding layout glides instead of jumping when the label changes.
• For a status line that shows ongoing work, use TextShimmer. For numbers and values that should roll, use SlotText.

Usage

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

<button type="button" aria-pressed={following} onClick={() => setFollowing(!following)}>
  <TextMorph>{following ? "Following" : "Follow"}</TextMorph>
</button>;

Props

Prop	Type	Default	Description
children	string	—	The label (required). Must be a plain string.
as	"span" | "div" | "p" | "strong" | "h1" | "h2" | "h3"	"span"	Element to render.
className	string	—	Typography for the label.
id	string	—	Id on the element.

Notes

• Stays on one line (white-space: nowrap); keep labels short.
• Assistive technology reads the plain text from a visually hidden copy; the animated glyphs are aria-hidden. Announce changes from your own live region if needed.
• Letters match by character and occurrence, so only genuinely new letters stagger in.
• Width follows font loading and responsive sizes immediately; only label changes spring. Reduced motion swaps instantly.