Morphing Text

Heroes 21

About

An accessible headline effect where one word blurs and morphs into the next using an SVG alpha-threshold filter, for a hero line that has more than one true ending.

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

Code

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

Usage.tsx

"use client";

import { MorphingText } from "@/components/ui/morphing-text";

export default function MorphingTextDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background px-6 py-24">
      <div className="max-w-xl text-center">
        <h2 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
          Interfaces that feel{" "}
          <MorphingText
            words={["fast", "accessible", "considered", "yours"]}
            className="text-primary"
          />
        </h2>
        <p className="mt-4 text-sm text-muted-foreground">
          A screen reader hears &ldquo;fast, accessible, considered,
          yours&rdquo; once, not a new word every two seconds.
        </p>
      </div>
    </div>
  );
}