Morph Text

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

Installation

npx shadcn@latest add @iconiq/morph-texts

8 props

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

Default3000

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.

Notes

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.