Letter Morph

Installation


pnpm dlx shadcn@latest add @motokoui/letter-morph

Usage

import { LetterMorph } from "@/components/ui/letter-morph"
 
export default function Example() {
  return (
    <LetterMorph
      words={["BUILD", "CREATE", "SHIP"]}
      textClassName="text-5xl font-semibold"
    />
  )
}

Two stacked layers crossfade through blur while an SVG threshold filter fuses their silhouettes — the word reshapes instead of swapping.

Props

Prop	Type	Default
`words`	`string[]`	required
`morphTime`	`number`	`1.2`
`cooldownTime`	`number`	`1.5`
`textClassName`	`string`	—
`className`	`string`	—

Respects prefers-reduced-motion — words swap without the gooey morph.