Text Scramble & Variable Morph
also known asscramble text · decoder text · variable font morph
An animation where characters cycle through random glyphs before resolving — or where a variable font's weight/width morphs on interaction.
Text scramble cycles each character of a word through random glyphs (often matrix-style: digits, latin letters, symbols) before settling on the final letter. Each character resolves on a slight delay, creating a typewriter-meets-decryption feel.
Variable-font morphing animates between values on a font's variation axes (`wght`, `wdth`, `slnt`, custom axes like `MONO` or `CASL`) on hover, scroll, or page load. A headline can shift from light to bold, condensed to extended, smoothly in CSS via `font-variation-settings`.
Both techniques signal a technical, modern brand — used heavily by AI companies, dev tools, and editorial sites. The shared logic: type itself becomes the motion, no decorative animation needed.
- Hero headlines on AI / dev-tool / technical brands
- Section headers that benefit from a focal moment
- Logo lockups that want subtle life
- Body copy or anything that needs to be readable instantly
- Long headlines — scramble works best on 1–3 short words
- +Use a monospace or geometric sans for scramble effects
- +Trigger once on viewport entry, not on every scroll
- +Respect `prefers-reduced-motion` — show static text instead
- −Don't scramble more than 12 characters — it crosses into noise
- −Don't use serifs for scramble — variable glyph widths break the rhythm
People also ask
What's a variable font?
A single font file containing a continuous range of weights, widths, or other axes — instead of separate Light/Regular/Bold files. This lets you animate between values smoothly via CSS `font-variation-settings`.