Foldit Fold
Entrance & Kinetic · Animated · pure CSS
Foldit's paper-strip glyphs fold and unfold on a slow origami breathe, driven by the color font's own weight axis — thin, near-flat ribbons at the low end that fold up into dense, dimensional letterforms at the peak. An optional single-hue palette recolor deepens the baked crease shading exactly as each letter folds, tinting the whole word to your chosen paper hue.
How it works
Foldit Fold 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
Foldit Fold exposes 5 dedicated controls — Fold, Unfold, Speed, Paper and Recolor — 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
/* Foldit Fold — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Foldit', sans-serif (load from Google Fonts).
*/
@font-palette-values --text-effect-pb {
font-family: "Foldit";
base-palette: 0;
override-colors:
0 hsl(180 95% 30%),
1 hsl(180 90% 70%),
2 hsl(180 95% 50%),
3 hsl(180 85% 82%);
}
@font-palette-values --text-effect-pa {
font-family: "Foldit";
base-palette: 0;
override-colors:
0 hsl(180 75% 45%),
1 hsl(180 85% 80%),
2 hsl(180 80% 62%),
3 hsl(180 70% 90%);
}
.text-effect {
font-family: 'Foldit', sans-serif;
font-weight: 400;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
font-variation-settings: 'wght' 820;
font-palette: --text-effect-pb;
animation: text-effect-fold 6.2s ease-in-out infinite;
}
@keyframes text-effect-fold {
0%, 16% { font-variation-settings: 'wght' 820; font-palette: --text-effect-pb; }
50% { font-variation-settings: 'wght' 200; font-palette: --text-effect-pa; }
84%, 100% { font-variation-settings: 'wght' 820; font-palette: --text-effect-pb; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- COLRv1 variable color font (all modern browsers); paper-hue palette recolor is Chromium-smooth, stepped elsewhere.
- Capabilities
- pure