Gradient GeneratorForm Builderllms-full.txt
ComponentsText Animations

Text Morphing

Smooth text morphing animation for React. Words transition with blur and scale effects. Perfect for dynamic hero sections and attention-grabbing headlines.

Last updated on

Edit on GitHub
Open in 
"use client";
 
import { MorphingText } from "@/components/ui/text-morphing";
 
export function TextMorphingDemo() {
  return (
    <div className="flex items-center justify-center">
      <div className="text-center">
        <h1 className="mb-4 font-bold text-4xl">
          Build{" "}
          <MorphingText
            words={["beautiful", "amazing", "stunning", "incredible"]}
            className="text-blue-600"
          />{" "}
          interfaces
        </h1>
        <p className="text-lg text-muted-foreground">
          Create{" "}
          <MorphingText
            words={["responsive", "accessible", "performant", "modern"]}
            interval={2000}
            className="text-green-600"
          />{" "}
          web experiences
        </p>
      </div>
    </div>
  );
}

Examples

Variants

Open in 
"use client";
 
import { MorphingText } from "@/components/ui/text-morphing";
 
export function TextMorphingVariantsDemo() {
  return (
    <div className="space-y-8">
      <div className="text-center">
        <h2 className="mb-2 font-semibold text-2xl">Fast Animation</h2>
        <p className="text-lg">
          Experience{" "}
          <MorphingText
            words={["speed", "velocity", "rapidity", "quickness"]}
            interval={1500}
            animationDuration={0.3}
            className="font-bold text-red-500"
          />{" "}
          like never before
        </p>
      </div>
 
      <div className="text-center">
        <h2 className="mb-2 font-semibold text-2xl">Slow & Elegant</h2>
        <p className="text-lg">
          Enjoy{" "}
          <MorphingText
            words={["grace", "elegance", "beauty", "poetry"]}
            interval={4000}
            animationDuration={1.2}
            className="font-bold text-purple-500"
          />{" "}
          in motion
        </p>
      </div>
 
      <div className="text-center">
        <h2 className="mb-2 font-semibold text-2xl">Tech Terms</h2>
        <p className="text-lg">
          Powered by{" "}
          <MorphingText
            words={["React", "TypeScript", "Next.js", "Tailwind"]}
            interval={2500}
            className="font-mono text-cyan-500"
          />
        </p>
      </div>
    </div>
  );
}

Installation

CLI

npx shadcn@latest add "https://jolyui.dev/r/text-morphing"

Manual

Install the following dependencies:

npm install motion

Copy and paste the following code into your project. component/ui/text-morphing.tsx

import { AnimatePresence, motion } from "motion/react";
import * as React from "react";
import { cn } from "@/lib/utils";
 
interface MorphingTextProps {
  words: string[];
  className?: string;
  interval?: number;
  animationDuration?: number;
}
 
const MorphingText = React.forwardRef<HTMLSpanElement, MorphingTextProps>(
  ({ words, className, interval = 3000, animationDuration = 0.5 }, ref) => {
    const [currentIndex, setCurrentIndex] = React.useState(0);
 
    React.useEffect(() => {
      const timer = setInterval(() => {
        setCurrentIndex((prev) => (prev + 1) % words.length);
      }, interval);
      return () => clearInterval(timer);
    }, [words.length, interval]);
 
    return (
      <span ref={ref} className={cn("relative inline-block", className)}>
        <AnimatePresence mode="wait">
          <motion.span
            key={currentIndex}
            initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, y: -20, filter: "blur(8px)" }}
            transition={{ duration: animationDuration, ease: "easeInOut" }}
            className="inline-block"
          >
            {words[currentIndex]}
          </motion.span>
        </AnimatePresence>
      </span>
    );
  },
);
MorphingText.displayName = "MorphingText";
export { MorphingText };

API Reference

Prop

Type

Notes

  • Uses motion/react for smooth blur and slide animations

  • Automatically cycles through words at specified intervals

  • Supports custom CSS classes for styling

  • Animation includes opacity, vertical movement, and blur effects

  • Perfect for hero sections, testimonials, or dynamic content

    path="./types/docs/text-morphing.ts"

How is this guide?

Shutter Text

A cinematic shutter-style text reveal animation with layered color slices that sweep across each character. Supports auto, scroll, click, and hover triggers.

Typewriter Text

React typewriter effect with customizable speed, cursor styles, and word deletion. Perfect for hero sections and dynamic text displays.

On this page

Examples
Variants
Installation
CLI
Manual
API Reference
Notes