Morphing Text

Cycles through an array of words with a smooth blur-morph transition. Configurable interval and CSS-only animation.

Beautiful

Code

import { MorphingText } from "@/components/ui/morphing-text"

export default function Example() {
  return (
    <MorphingText
      words={["Beautiful", "Animated", "Powerful", "Yours"]}
      className="text-4xl font-bold"
    />
  )
}

Installation

$npx particleui-cli add morphing-text

Usage

TSX

import { MorphingText } from "@/components/ui/morphing-text"

export default function Example() {
  return (
    <MorphingText
      words={["Beautiful", "Animated", "Powerful", "Yours"]}
      className="text-4xl font-bold"
    />
  )
}

Props

Prop	Type	Default	Required
words	string[]	—	yes
className	string	—	no

Details

Source filecomponents/ui/morphing-text.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—