Morphing Text

"use client"

import { MorphingText } from "@animate-ui/react/primitives/texts/morphing"

const texts = [
  "MorphingText Primitive",
  "Animate your text 🚀",
  "Handles emojis 🚀✨",
  "Built with Motion ✨",
]

export default function MorphingTextDemo({
  loop = true,
  holdDelay = 2500,
}: {
  loop?: boolean
  holdDelay?: number
}) {
  return (
    <MorphingText
      key={`${loop}-${holdDelay}`}
      className="max-w-2xl text-4xl font-semibold"
      text={texts}
      loop={loop}
      holdDelay={holdDelay}
    />
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import { MorphingText } from '@animate-ui/react/primitives/texts/morphing';

export function Tagline() {
  return <MorphingText text={['Fast', 'Accessible', 'Animated']} loop />;
}

AnimationCopy Anchor Link

• Each text holds for holdDelay, then morphs into the next: letters both texts share glide to their new place (a shared layout animation), the others fade, blur (10px) and scale (0.8) in and out. Everything moves on a soft spring (stiffness: 125, damping: 25, mass: 0.4) without overshoot.
• Emoji and accented letters stay whole.
• The cycle pauses off screen and in a hidden tab.
• <AnimateUIProvider tempo> paces the default spring.
• Under reduced motion, the texts keep cycling as a plain crossfade.
• Screen readers read the current text whole, not letter by letter. It is not a live region.

API ReferenceCopy Anchor Link

MorphingTextCopy Anchor Link