Slide Projector
Entrance & Kinetic · Animated · pure CSS
A carousel click-advance on an endless loop: a warm-graded projection frame holds still for a long beat, then a full-stage lamp-flash spikes toward overexposure, the slide claps down with a hard vertical jolt-and-rebound, and the image resolves through a quick blur-to-sharp focus pull before settling back into the graded hold. No grain, no scanlines — purely the flash, jolt and focus rhythm of the projector.
How it works
Slide Projector 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
Slide Projector exposes 4 dedicated controls — Cycle Length, Flash Strength, Jolt Size and Grade Warmth — 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
/* Slide Projector — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Space Grotesk', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Space Grotesk', sans-serif;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
}
.text-effect {
position: relative;
display: inline-block;
isolation: isolate;
overflow: hidden;
border-radius: 4px;
padding: 0.45em 0.85em;
background: radial-gradient(ellipse at 50% 42%, hsl(34 62.8% 17.7%) 0%, hsl(228 18% 6%) 78%);
box-shadow: inset 0 0 0 1px hsl(34 30% 30% / 0.5), 0 6px 18px hsl(0 0% 0% / 0.5);
}
.text-effect::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(ellipse at 50% 45%, hsl(42 55% 94%) 0%, hsl(42 45% 90% / 0) 72%);
opacity: 0;
will-change: opacity;
animation: text-effect-flash 3.60s linear infinite;
}
.text-effect .fx-slide {
position: relative;
z-index: 1;
display: inline-block;
white-space: pre;
line-height: 1;
color: hsl(38 71.95% 86.16%);
will-change: transform, filter;
animation: text-effect-slide 3.60s linear infinite;
}
@keyframes text-effect-slide {
0% { transform: translateY(0); filter: blur(0); }
87% { transform: translateY(0); filter: blur(0); }
89% { transform: translateY(0); filter: blur(6.49px); }
91% { transform: translateY(2.2px); filter: blur(6.49px); }
93% { transform: translateY(-0.77px); filter: blur(2.92px); }
96% { transform: translateY(0.18px); filter: blur(0.78px); }
100% { transform: translateY(0); filter: blur(0); }
}
@keyframes text-effect-flash {
0% { opacity: 0; }
87% { opacity: 0; }
88.5% { opacity: 0.342; }
90% { opacity: 0; }
100% { opacity: 0; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- Looping lamp-flash + jolt + focus-pull cadence (all modern browsers)
- Capabilities
- pure