Components
Text Morphing
A smooth text morphing component that cycles through words with beautiful animations.
Last updated on
"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
"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 motionCopy 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?