Browse components
Morph Text
Cycles through words that melt into one another through a gooey blur-and-threshold crossfade.
Installation
npx shadcn@latest add @glint-ui/morph-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/morph-text.json
Usage
import { MorphText } from "@/components/ui/morph-text";
<MorphText words={["Imagine", "Design", "Build", "Ship"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["Imagine","Design","Prototype","Build","Ship"] | Words to cycle through. |
| duration | number | 1100 | Morph duration, in ms. |
| pause | number | 1600 | How long each word rests, in ms. |
| className | string | — | Extra classes for the root element. |