Wensity

Text Morphing

Blur-morphing headlines that cycle phrases with a gooey, seamless crossfade.

textmorphheadlineanimationtypographyblur
Text Morphing component preview

Overview

Text Morphing is a React and Tailwind CSS morphing text animation that dissolves one phrase into the next with a blur crossfade and a gooey SVG threshold filter, in Next.js or any React app, with no dependencies. Phrases cycle on a timer set by morphDuration and cooldownDuration, the loop pauses off screen, and reduced motion shows the first phrase as plain text. The phrases sit in the server HTML and the as prop makes it a real heading. It ships with a large fixed size and height, so override both through className.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add text-morphing

Usage

Import TextMorphing from @/components/wensity/text-morphing and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { TextMorphing } from "@/components/wensity/text-morphing";


export default function Example() {
  return (
    <TextMorphing
      texts={[
        "Wensity",
        "presents",
        "text",
        "morphing",
        "animation",
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
textsstring[]-Phrases to cycle through. Needs at least two for a morph.
morphDurationnumber1.5Length of each morph crossfade, in seconds.
cooldownDurationnumber0.5Hold time on the settled phrase before the next morph, in seconds.
pausedbooleanfalsePause the loop.
as"p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6""div"Element to render. Pass "h1" or "h2" to make the morphing phrase a real heading.

Featured in React hero section components.