Scroll Morph
Entrance & Kinetic · Animated · pure CSS
The Recursive variable font morphs under your scroll: as the words travel the viewport their weight and casual axes ramp from a feather-light hand-drawn thin up to a massive linear black, scrubbed frame by frame by scroll position. A synced warm-to-cool colour-temperature shift rides along so the growing mass reads as a drop in temperature — pure CSS, no JavaScript.
How it works
Scroll Morph is an animated entrance & kinetic text effect rendered entirely in CSS. It is driven by a scroll-linked animation timeline.
Controls
Scroll Morph exposes 4 dedicated controls — Light, Heavy, Blend and Colour — 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
/* Scroll Morph — made with TEXT-FX · https://text-fx.app
* HTML: uses scroll-driven animation.
* Font: 'Recursive', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Recursive', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
.text-effect {
color: hsl(123 42% 66%);
font-variation-settings: 'wght' 580, 'CASL' 0.5, 'slnt' -4;
will-change: font-variation-settings;
}
@supports (animation-timeline: view()) {
.text-effect {
animation: text-effect-morph linear both;
animation-timeline: view();
animation-range: cover;
}
}
@keyframes text-effect-morph {
0% { color: hsl(34 82% 72%); font-variation-settings: 'wght' 338, 'CASL' 1, 'slnt' -8; }
50% { color: hsl(123 42% 66%); font-variation-settings: 'wght' 580, 'CASL' 0.5, 'slnt' -4; }
100% { color: hsl(212 82% 60%); font-variation-settings: 'wght' 821, 'CASL' 0, 'slnt' 0; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- Scroll-scrubbed in Chromium & Safari; static elsewhere
- Capabilities
- pure, scroll