Text
Morph text
Words that melt into one another — a blur crossfade sharpened by an SVG threshold into liquid.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { MorphText } from '@vizzele/react';
<h2>Interfaces that feel <MorphText gradient words={['liquid', 'holographic', 'elastic', 'alive']} /></h2>Props
| Prop | Type | Default | Description |
|---|---|---|---|
words | string[] | — | Words to cycle. |
hold | number | 1800 | Time each word stays (ms). |
variant | 'cascade' | 'goo' | 'cascade' | Letter cascade or liquid blend. |
stagger | number | 35 | ms between letters (cascade). |
gradient | boolean | false | Iridescent gradient, continuous across the word. |
morph | number | 900 | Blend duration (goo). |
Accessibility
- A hidden live copy holds the current word for assistive tech.
- Reduced motion: words swap without morphing.