Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { MorphingText } from "@/registry/magicui/morphing-text"
const texts = [
"Hello",
"Morphing",
"Text",
"Animation",
"React",
"Component",
"Smooth",
"Transition",
"Engaging",
]
export function MorphingTextDemo() {
return <MorphingText texts={texts} />
}
Installation
pnpm dlx shadcn@latest add @magicui/morphing-text
Usage
import { MorphingText } from "@/components/magicui/morphing-text"
<MorphingText texts={["Hello", "World"]} />
Props
Prop | Type | Default | Description |
---|---|---|---|
texts | string[] | [] | Array of texts to morph between |
className | string? | "" | Additional classes for the container |
This MorphingText
component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.
Credits
- Credit to @luis-code
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development