MorphWords

Words that melt into one another with a gooey liquid morph.

Make it liquid, smooth, yours or alive

bash
npx shadcn@latest add https://www.rad-ui.com/r/morph-words.json

React
import MorphWords from "@/components/fx/morph-words"

<h2>Make it <MorphWords words={["liquid", "smooth", "yours"]} /></h2>

Screen readers hear every word once as a list, never a changing word.
The gooey filter only runs mid-morph, so resting text stays crisp.
Pauses on hover and offscreen; `paused` stops it from a visible control (WCAG 2.2.2).
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) swaps words without blur or filter.

Prop	Type	Default	Description
words	string[]	—	Words to morph between.
interval	number	2600	Milliseconds each word stays.
paused	boolean	false	Stop morphing.
srJoiner	(words: string[]) => string	"a, b or c"	How the words are read to screen readers.