Tween UITween UI
7

Components

Morphing Text

A headline whose last word melts into the next with a gooey blur morph.

The last word of a headline cycles through a list. The outgoing word blurs and fades while the incoming one sharpens, and an SVG alpha threshold fuses the two into a single liquid shape mid-morph. The word slot eases between word widths, so the surrounding text makes room smoothly — or set fixedWidth to keep it perfectly still. The loop only runs while the headline is on screen. Driven by GSAP and ScrollTrigger.

New tab

Motion that feels
like magic

Installation

pnpm dlx shadcn@latest add @tween-ui/morphing-text

Usage

app/page.tsx
app/page.tsx
import MorphingText from '@/components/tweenui/morphing-text';
 
export default function Page() {
  return (
    <MorphingText
      prefix={'Motion that feels\nlike'}
      words={['magic', 'water', 'silk', 'gravity']}
      className="text-center text-6xl font-medium tracking-tight"
      wordClassName="text-teal-700"
    />
  );
}

The word inherits the headline's font, size and color, so style it with className like any other text. Use wordClassName to set the morphing word apart. Without a prefix, it renders an inline <span> you can drop into your own heading.

Props

PropTypeDefaultDescription
wordsstring[]—Words to cycle through. The first renders on the server and is what screen readers hear.
prefixstring—Text before the word. \n starts a new line; the last line never wraps away from the word.
as'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span''h2' / 'span'Element to render. h2 when there is a prefix, span when there is not.
morphDurationnumber1.2Length of each morph, in seconds.
pauseDurationnumber1.8How long each word rests before morphing, in seconds.
maxBlurnumber16Blur ceiling while a word is fully dissolved, in pixels.
fixedWidthbooleanfalseKeep the slot at the first word's width so nearby text never moves; longer words overflow it.
wordAlign'left' | 'center' | 'right''left'Alignment of the word inside its slot.
wordClassNamestring—Extra classes for the morphing word.

Extends native HTML attributes (className, style, id, …). With a single word, it renders static text and no loop is created.

Accessibility

Screen readers hear the first word once, in a visually hidden copy, rather than a headline that keeps changing; the animated layer is aria-hidden. Under prefers-reduced-motion: reduce the first word stays in place, crisp — no blur, no width change, and the loop never starts.