Morph Text for React

Morph Text changes one word into the next without going anywhere: the outgoing letters swell and dissolve while the next word's letters condense where they stood, one after the other, and both words blur through the middle of the change, so the text seems to melt into its replacement. It cycles through its texts on its own, holds the width of the widest, and pauses while the pointer is over it.

Use it for a hero word that changes in place, or a short status that moves through its stages. For words that roll through a window like a reel, use Rotating Text; to lift each word away and raise the next, Flip Words; to slide the same letters into new places, Anagram Text. A small timer counts the turns and CSS keyframe animations the install adds to your stylesheet morph the letters, with no animation library; the blur is on each whole word, not on every letter, so a long word costs no more than a short one. With reduced motion the words swap in place.

Installation

Usage

import { MorphText } from "@/components/ui/morph-text";

<h1>
  <MorphText texts={["Beautiful", "Composable", "Yours"]} />
</h1>

Demos

Label

At a label's size it reads as a status that changes. duration is how long each text stays, 2400 ms by default, and stagger the time between one letter morphing and the next, 25 ms; 0 morphs the whole word at once.

Blur

--morph-text-blur is how soft the words get in the middle of the change, 8px by default. A small one keeps the letters legible as they cross; a large one, with a slower stagger, turns the change into a haze.

Accessibility

Screen readers read every text once, as a list (Beautiful, Composable, Yours), from a visually hidden copy; the morphing letters are hidden from them, so they never hear a word change mid-sentence. The texts stop while the pointer is over them, for anyone reading slowly, and with reduced motion they swap without blurring or scaling.

FAQ

API Reference