MorphText

Animate between text changes. Characters (or words) that stick around smoothly reposition, while new ones enter and old ones exit. Kerning-accurate splitting via Griffo's splitText. Built on Motion.

import { MorphText } from "griffo/morph";

Character Morph

The default mode. Characters maintain stable identity across updates and words — matching characters smoothly reposition while new ones enter and old ones exit.

Morph

Word Morph

Set splitBy="words" to morph at the word level. The initial, animate, and exit props accept callback variants with index and count for per-token customization.

Props

Prop	Type	Default
`children`	`string`	—
`as`	`keyof HTMLElementTagNameMap`	`"span"`
`className`	`string`	—
`style`	`CSSProperties`	—
`splitBy`	`"chars" \| "words"`	`"chars"`
`transition`	`AnimationOptions`	`spring (0.4s)`
`waitForFonts`	`boolean`	`true`
`reducedMotion`	`"user" \| "always" \| "never"`	`"user"`
`initial`	`Target \| ({ index, count }) => Target \| false`	`{ opacity: 0 }`
`animate`	`Target \| ({ index, count }) => Target`	`{ opacity: 1 }`
`exit`	`Target \| ({ index, count }) => Target`	`{ opacity: 0 }`
`stagger`	`number`	—
`animateInitial`	`boolean`	`false`
`onMorphComplete`	`() => void`	—

MorphText also forwards standard wrapper DOM/motion props (id, role, tabIndex, aria-*, data-*, event handlers).

Animation Model

When the text changes, MorphText diffs the previous and next tokens (characters or words depending on splitBy) using longest common subsequence matching:

Persisting tokens keep their identity and smoothly interpolate to their new position via layout animation.
Entering tokens animate from initial to animate.
Exiting tokens animate from their current state to exit, then are removed from the DOM.

Accessibility

MorphText sets aria-label on the wrapper so screen readers read the latest full string while split chars remain aria-hidden.