Morph Text

Cycling headline words with a goo-filter morph transition powered by Motion.

Installation

npx shadcn@latest add @iconiq/morph-texts

Props

MorphText

Cycling headline treatment that morphs between words with blur, scale, and an SVG goo filter while optionally revealing subtext beneath the rotator.

wordsstring[]

Required

Words or short phrases to cycle through. The component advances to the next entry on each interval tick.

intervalnumber

Default 3000

Milliseconds each word stays active before the next morph transition begins.

subtextstring

Optional supporting line rendered below the morphing word with a delayed fade-up entrance.

fontSizestring

Default "clamp(3rem, 15vw, 10rem)"

CSS font-size value applied to the morphing headline container.

fontFamilystring

Default "Space Grotesk", sans-serif

CSS font-family value applied to the headline and subtext.

classNamestring

Merged onto the root wrapper for layout and color overrides.

textClassNamestring

Merged onto the morphing text container when you need local typography overrides.

subtextClassNamestring

Merged onto the optional subtext element.

The active word is announced through aria-live=polite so screen readers can follow the rotation.

Each instance generates a unique SVG filter id so multiple MorphText components can coexist on one page.

Morph transition behavior

Word changes are driven by AnimatePresence and Motion variants that overlap enter and exit states so the goo filter can blend the outgoing and incoming text.

Enter and exit animate opacity, blur, and scale over roughly 0.9 seconds with an ease-in-out curve.

When only one word is provided, the interval timer is skipped and the headline stays static.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.