Scroll Spread
Entrance & Kinetic · Animated · pure CSS
Typography that breathes with the scroll: as the headline travels the viewport its letter-spacing scrubs from tight-overlapped and faintly blurred, open to a comfortably wide, crisp center, then back to tight as it leaves, driven by a pure-CSS view() timeline. A bidirectional kinetic tracking spread with a subtle opacity and blur ease at the extremes.
How it works
Scroll Spread is an animated entrance & kinetic text effect rendered entirely in CSS. It is driven by a scroll-linked animation timeline.
Controls
Scroll Spread exposes 3 dedicated controls — Spread, Blur and Easing Bias — 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 Spread — 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: 2px;
text-transform: uppercase;
}
.text-effect {
color: hsl(220 16% 95%);
}
@supports (animation-timeline: view()) {
.text-effect {
animation: text-effect-spread linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
@keyframes text-effect-spread {
0% { letter-spacing: -25px; filter: blur(4.8px); opacity: 0.55; }
10% { letter-spacing: -15.62px; filter: blur(3.13px); opacity: 0.706; }
20% { letter-spacing: -8.26px; filter: blur(1.82px); opacity: 0.829; }
30% { letter-spacing: -2.69px; filter: blur(0.83px); opacity: 0.922; }
40% { letter-spacing: 0.81px; filter: blur(0.21px); opacity: 0.98; }
50% { letter-spacing: 2px; filter: blur(0px); opacity: 1; }
60% { letter-spacing: 0.81px; filter: blur(0.21px); opacity: 0.98; }
70% { letter-spacing: -2.69px; filter: blur(0.83px); opacity: 0.922; }
80% { letter-spacing: -8.26px; filter: blur(1.82px); opacity: 0.829; }
90% { letter-spacing: -15.62px; filter: blur(3.13px); opacity: 0.706; }
100% { letter-spacing: -25px; filter: blur(4.8px); opacity: 0.55; }
}
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