Text Morph

Morphs one string into another by diffing tokens — shared characters slide to their new position, removed ones shrink out, added ones pop in.

Installation

npx smoothui-cli add text-morph

Features

• Character or word-level diffing between the previous and current text
• Shared tokens keep their identity and slide via layout animation instead of re-animating
• Removed tokens shrink out, added tokens spring in
• The surrounding wrapper width animates smoothly so nearby content never jumps
• Exiting tokens resolve against the component's own box, so they always animate out in place instead of escaping to a corner of the page
• Per-token stagger is capped, so a long sentence morphs as briskly as a short label
• Exits are shorter than entrances, so removed tokens clear out of the way instead of trailing behind
• Respects prefers-reduced-motion with an instant swap

Accessibility

ARIA Attributes

Screen Reader

• The wrapper renders the current string once as visually hidden text, so screen readers announce it as a single, coherent phrase. An aria-label would not work here: it is prohibited on the generic roles that the default as="span" (and as="div") produce, so assistive technology would drop it and — with every token aria-hidden — announce nothing at all.
• The animated character or word spans underneath are aria-hidden, so nothing is read out twice or letter-by-letter.
• The text remains selectable in the DOM at all times.

Reduced Motion

Respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the component renders the final string directly with no token splitting, no layout animation, and no spring transitions.

Props

Created by

Edu Calvo

Powered by

motion.dev