Smear Frame
Entrance & Kinetic · Animated · pure CSS
An anime sakuga entrance: every letter rockets in along the X axis as the animator's stretched in-between — scaled wide, skew-sheared and motion-blurred — hangs a beat at peak stretch, then snaps to a crisp rest pose while firing a single-frame impact flash. The smear-then-pop ripples across the word letter by letter and settles into clean solid type. Tune smear amount, stagger and speed, toggle the flash for comfort, or hover to replay the hit.
How it works
Smear Frame is an animated entrance & kinetic text effect rendered entirely in CSS. Each character is wrapped in its own span so it can animate independently — the HTML and JSX exports include that per-letter markup.
Controls
Smear Frame exposes 5 dedicated controls — Smear, Duration, Stagger, Impact Flash and Hue — 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
/* Smear Frame — made with TEXT-FX · https://text-fx.app
* HTML: each character is wrapped in a <span> — see the HTML export.
* Font: 'Space Mono', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Space Mono', monospace;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
.text-effect {
color: hsl(114 70% 66%);
white-space: pre;
}
.text-effect .fx-ch {
display: inline-block;
transform-origin: 50% 50%;
will-change: transform, filter, opacity;
animation: text-effect-smear 0.66s cubic-bezier(0.2, 0.72, 0.24, 1) both;
animation-delay: calc(var(--i) * 84ms);
}
.text-effect:hover .fx-ch {
animation-name: text-effect-smear-r;
}
@keyframes text-effect-smear {
0% { transform: translateX(-120%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 0; }
10% { opacity: 1; }
45% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
65% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
66% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
68% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
69% { transform: translateX(0) scaleX(0.9) skewX(0deg); filter: none; opacity: 1; }
82% { transform: translateX(0) scaleX(1.05) skewX(0deg); filter: none; opacity: 1; }
100% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
}
@keyframes text-effect-smear-r {
0% { transform: translateX(-120%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 0; }
10% { opacity: 1; }
45% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
65% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
66% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
68% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
69% { transform: translateX(0) scaleX(0.9) skewX(0deg); filter: none; opacity: 1; }
82% { transform: translateX(0) scaleX(1.05) skewX(0deg); filter: none; opacity: 1; }
100% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
}
HTML
This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).
<!-- Made with TEXT-FX · https://text-fx.app -->
<style>
.text-effect {
font-family: 'Space Mono', monospace;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
.text-effect {
color: hsl(114 70% 66%);
white-space: pre;
}
.text-effect .fx-ch {
display: inline-block;
transform-origin: 50% 50%;
will-change: transform, filter, opacity;
animation: text-effect-smear 0.66s cubic-bezier(0.2, 0.72, 0.24, 1) both;
animation-delay: calc(var(--i) * 84ms);
}
.text-effect:hover .fx-ch {
animation-name: text-effect-smear-r;
}
@keyframes text-effect-smear {
0% { transform: translateX(-120%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 0; }
10% { opacity: 1; }
45% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
65% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
66% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
68% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
69% { transform: translateX(0) scaleX(0.9) skewX(0deg); filter: none; opacity: 1; }
82% { transform: translateX(0) scaleX(1.05) skewX(0deg); filter: none; opacity: 1; }
100% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
}
@keyframes text-effect-smear-r {
0% { transform: translateX(-120%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 0; }
10% { opacity: 1; }
45% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
65% { transform: translateX(-6%) scaleX(2.2) skewX(-18deg); filter: blur(0.072em); opacity: 1; }
66% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
68% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
69% { transform: translateX(0) scaleX(0.9) skewX(0deg); filter: none; opacity: 1; }
82% { transform: translateX(0) scaleX(1.05) skewX(0deg); filter: none; opacity: 1; }
100% { transform: translateX(0) scaleX(1) skewX(0deg); filter: none; opacity: 1; }
}
</style>
<div class="text-effect"><span class="fx-ch" style="--i:0;--n:9;--rev:8;--mid:4">Y</span><span class="fx-ch" style="--i:1;--n:9;--rev:7;--mid:4">o</span><span class="fx-ch" style="--i:2;--n:9;--rev:6;--mid:4">u</span><span class="fx-ch" style="--i:3;--n:9;--rev:5;--mid:4">r</span><span class="fx-ch" style="--i:4;--n:9;--rev:4;--mid:4"> </span><span class="fx-ch" style="--i:5;--n:9;--rev:3;--mid:4">t</span><span class="fx-ch" style="--i:6;--n:9;--rev:2;--mid:4">e</span><span class="fx-ch" style="--i:7;--n:9;--rev:1;--mid:4">x</span><span class="fx-ch" style="--i:8;--n:9;--rev:0;--mid:4">t</span></div>
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- per-letter transform smear + one-frame invert impact flash (all modern browsers)
- Capabilities
- perLetter