Fluid Text Morph

Text 145

About

An interactive headline that smoothly morphs between predefined word pairs on hover and cycles through them on click, leveraging Framer Motion’s spring animations and AnimatePresence for fluid letter-by-letter transitions.

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

Code

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

Usage.tsx

"use client"; // Required for Next.js App Router

import { FluidTextMorph } from "@/components/ui/fluid-text-morph";

// 1. --- DEMO-SPECIFIC DATA ---
// The content is defined here, not inside the component.
const WORD_PAIRS: [string, string][] = [
  ["Design", "Develop"],
  ["Create", "Innovate"],
  ["Build", "Ship"],
  ["Animate", "Engage"],
];

export default function FluidTextMorphDemo() {
  // 2. --- DEMO-SPECIFIC LAYOUT & STYLING ---
  // The background and centering are part of the demo, not the component.
  // It uses theme variables (`bg-background`) to be theme-aware.
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background">
      {/* 3. --- RENDERING THE REUSABLE COMPONENT ---
          The component is now used by passing props to it. */}
      <FluidTextMorph wordPairs={WORD_PAIRS} />

      {/* The instruction text is also part of the demo page. */}
      <p className="mt-6 text-muted-foreground">
        Hover to morph, Click to change.
      </p>
    </div>
  );
}