Text Animations
Morphing Text
A gooey blur-morph that cross-dissolves between a list of words.
Adapted from React Bits
Install
bun add clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/morphing-text/morphing-text.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| auto | boolean | true | Loop through the words forever (off = morph once). |
What It Demonstrates
- Text morph
- Text that animates character by character when it changes, drawing attention to the new value.
- Morph
- One shape smoothly turns into another shape, e.g. Dynamic Island.
- Crossfade
- One element fades out as another fades in, in the same spot.
- Blur
- A blur filter used to soften an element or mask tiny imperfections.
- Loop
- An animation that repeats, a set number of times or infinitely.
Related Components
Specter
Spectral RGB-split echoes drift off the letters and dissolve into the dark.
Molten
Type that melts. Letters sag under their own weight, string out, and fuse into one surface where they touch — because the glyphs are a coverage field cut by a threshold rather than shapes being moved, so two stems raise the coverage between them past the cut and one outline closes over both. The word underneath is a real text node the whole time: selectable, searchable, and read correctly aloud while it runs.
Marquee Text
A marquee that scrolls only when its text overflows the container.
Letters Pull
A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.
Scramble Text
Ciphered glyphs boiling out of noise and resolving into words — a decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.