Weight Pulse
Entrance & Kinetic · Animated · pure CSS
The whole word breathes from thin to heavy on the variable font's weight axis. A smooth, single-element weight throb.
How it works
Weight Pulse 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
Weight Pulse exposes 4 dedicated controls — Hue, Light, Heavy 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
/* Weight Pulse — 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(141 60% 76%);
font-variation-settings: 'wght' 675;
animation: text-effect-wpulse 2.8s ease-in-out infinite alternate;
}
@keyframes text-effect-wpulse {
from { font-variation-settings: 'wght' 445; }
to { font-variation-settings: 'wght' 905; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- Variable-font wght axis (Recursive) animated on the whole word.
- Capabilities
- pure