Morphing Text Demo

PreviousNext

Example showing a dynamic text morphing component.

Docs
magicuiexample

Preview

Loading preview…
registry/example/morphing-text-demo.tsx
import { MorphingText } from "@/registry/magicui/morphing-text"

const texts = [
  "Hello",
  "Morphing",
  "Text",
  "Animation",
  "React",
  "Component",
  "Smooth",
  "Transition",
  "Engaging",
]

export default function MorphingTextDemo() {
  return <MorphingText texts={texts} />
}

Installation

npx shadcn@latest add @magicui/morphing-text-demo

Usage

import { MorphingTextDemo } from "@/components/morphing-text-demo"
<MorphingTextDemo />