Morph Text

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

Installation

npx shadcn@latest add @iconiq/morph-texts

File Structure

Usage

"use client";

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

export function HeroMorph() {
  return (
    <p className="max-w-4xl font-light text-2xl text-foreground tracking-tight sm:text-4xl">
      Build software that feels{" "}
      <MorphText
        fontFamily="inherit"
        fontSize="1em"
        interval={2800}
        textClassName="font-semibold"
        words={["fast", "fluid", "alive"]}
      />
      .
    </p>
  );
}

Props

Props
Description

MorphText

words

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

Type string[]

interval

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

Type number·Default 3000

subtext

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

Type string

fontSize

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

Type string·Default "clamp(3rem, 15vw, 10rem)"

fontFamily

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

Type string·Default "Space Grotesk", sans-serif

className

Merged onto the root wrapper for layout and color overrides.

Type string

textClassName

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

Type string

subtextClassName

Merged onto the optional subtext element.

Type string

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.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Build software that feels fast