← All effects

Text Morph

TextVanilla JS · zero dependenciescrossfade + scramble + living width
-- fps
prefers-reduced-motion detected — the first word is shown still

X-ray · layers

the words crossfade with blur (off = hard swap)
letters flip through random glyphs mid-morph
the box width animates between words (off = it jumps)

Parameters

Your words
Morph time0.7 s
Hold1.2 s
Blur6 px
Stagger0.60
your version · updates as you tinker

How this effect works

There are two words stacked in the same spot: the one leaving and the one arriving. A single progress value e runs 0 → 1 over the morph. The leaving word fades its opacity down and its blur up; the arriving word does the exact opposite, coming out of the blur into focus. Because both happen at once, the eye reads it as one word dissolving into the other rather than two separate animations.

The scramble builds the arriving word letter by letter: each position shows a random glyph until e passes that letter's reveal point, and stagger spreads those reveal points across the word so it resolves left-to-right. The width layer measures both words and animates the box between the two, so whatever sits next to it flows instead of snapping. Type your own words separated by |.

Production notes: respects prefers-reduced-motion (first word shown still) · widths are measured once per word on a scratch canvas · the user's words are escaped and never touch innerHTML · the copied snippet is self-contained HTML + CSS + JS.