Morph Text

Text 38

About

Cycling headline words that morph between phrases with a goo-filter blur transition.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Morph Text to your project and fits it to your theme.

Code

How Morph Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function HeroMorph() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-8">
      <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>
    </div>
  );
}