Morphing Text

PreviewCode

@/demos/MorphingTextDemo.tsx

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

pnpm dlx shadcn@latest add @magicui-solid/morphing-text

bun

bunx shadcn@latest add @magicui-solid/morphing-text

yarn

yarn dlx shadcn@latest add @magicui-solid/morphing-text

npm

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

Import

import { MorphingText } from '@/components/magicui/morphing-text'

Usage

<MorphingText texts={['Hello', 'World']} />

Props

Prop	Type	Default	Description
texts	string[]	[]	Array of texts to morph between
class	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

Original:

magicui.design/docs/components/morphing-text