Morphing Text

A dynamic canvas filtering effect that morphs text words into one another seamlessly horizontally or vertically.

Preview

pnpm dlx vibe-ui-kit@latest add morphing-text

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

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

Prop	Type	Default	Description
`texts`	`string[]`	`[]`	Array of texts to morph between
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	Controls text layout orientation and motion direction
`className`	`string?`	`""`	Additional classes for the container

This MorphingText component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.

Jenish Sabhadiya

Primary Theme Accent

Border Corner Radius

Glass Backdrop Blur8px

Export CSS Config

@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}

Changes apply instantly to this documentation workspace.

Morphing Text | Vibe UI