Mono Shift
Entrance & Kinetic · Animated · pure CSS
The type morphs between a proportional sans and a monospace face on the variable font's MONO axis, the letters widening and squaring off in sync.
How it works
Mono Shift is an animated entrance & kinetic text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Mono Shift exposes 2 dedicated controls — Hue and Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Mono Shift — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Recursive', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Recursive', sans-serif;
font-weight: 900;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
color: hsl(58 55% 76%);
font-variation-settings: 'wght' 900, 'MONO' 0.6;
animation: text-effect-mono 2.1s ease-in-out infinite alternate;
}
@keyframes text-effect-mono {
from { font-variation-settings: 'wght' 900, 'MONO' 0; }
to { font-variation-settings: 'wght' 900, 'MONO' 1; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- Variable-font MONO axis (Recursive) morphing proportional↔monospace.
- Capabilities
- pure