Impact Slam

Entrance & Kinetic · Animated · pure CSS

The word slams down edge-on through a forced perspective, overshoots, and snaps through one squash-stretch impact frame while a radial burst of speed lines flashes behind it — a fighting-game KO freeze-frame. Each letter carries its own vertical gold gradient with a dark stroke ring and a stacked warm bevel, so it reads like struck metal on both dark and light stages.

Open in the generator →All effects
Impact Slam

How it works

Impact Slam 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

Impact Slam exposes 5 dedicated controls — Slam Angle, Overshoot, Speed Lines, Fill Hue and Duration — 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

/* Impact Slam — made with TEXT-FX · https://text-fx.app
 * HTML: each character is wrapped in a <span> — see the HTML export.
 * Font: 'Archivo Black', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  perspective: 820px;
}
.text-effect::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15em;
  height: 15em;
  transform: translate(-50%, -50%) scale(0);
  background: repeating-conic-gradient(from 0deg at 50% 50%, hsl(0 0% 100% / 0.85) 0deg 3deg, transparent 3deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 35%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 35%, transparent 62%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: text-effect-burst 1.90s cubic-bezier(.2,.7,.3,1) both;
}
.text-effect .fx-slam {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: pre;
  line-height: 1;
  font-style: italic;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 6px hsl(0 0% 0% / 0.35));
  animation: text-effect-slam 1.90s cubic-bezier(.2,.9,.25,1) both;
}
.text-effect .fx-ch {
  display: inline-block;
  transform: skewX(-6deg);
  background: linear-gradient(180deg, hsl(292 100% 96%) 0%, hsl(290 100% 74%) 34%, hsl(287 100% 62%) 55%, hsl(284 100% 55%) 74%, hsl(278 90% 50%) 90%, hsl(272 85% 40%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1.6px hsl(270 95% 12%);
  text-shadow: 0 -1px 0 hsl(268 100% 35% / 0.5), 2px 4px 0 hsl(266 100% 14% / 0.65), 4px 7px 0 hsl(264 100% 8% / 0.5), 5px 10px 12px hsl(0 0% 0% / 0.5);
}
.text-effect:hover .fx-slam {
  animation-name: text-effect-slam-r;
}
.text-effect:hover::after {
  animation-name: text-effect-burst-r;
}

@keyframes text-effect-slam {
  0% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  8% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  30% { transform: rotateX(-24deg) scale(1.110); opacity: 1; }
  58% { transform: rotateX(0deg) scale(1.110); opacity: 1; }
  68% { transform: rotateX(0deg) scaleY(0.85) scaleX(1.08); opacity: 1; }
  80% { transform: rotateX(0deg) scaleY(1.06) scaleX(0.97); opacity: 1; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}
@keyframes text-effect-burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  62% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.83; }
  82% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
@keyframes text-effect-slam-r {
  0% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  8% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  30% { transform: rotateX(-24deg) scale(1.110); opacity: 1; }
  58% { transform: rotateX(0deg) scale(1.110); opacity: 1; }
  68% { transform: rotateX(0deg) scaleY(0.85) scaleX(1.08); opacity: 1; }
  80% { transform: rotateX(0deg) scaleY(1.06) scaleX(0.97); opacity: 1; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}
@keyframes text-effect-burst-r {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  62% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.83; }
  82% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

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: 'Archivo Black', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  perspective: 820px;
}
.text-effect::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15em;
  height: 15em;
  transform: translate(-50%, -50%) scale(0);
  background: repeating-conic-gradient(from 0deg at 50% 50%, hsl(0 0% 100% / 0.85) 0deg 3deg, transparent 3deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 35%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 35%, transparent 62%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: text-effect-burst 1.90s cubic-bezier(.2,.7,.3,1) both;
}
.text-effect .fx-slam {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: pre;
  line-height: 1;
  font-style: italic;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 6px hsl(0 0% 0% / 0.35));
  animation: text-effect-slam 1.90s cubic-bezier(.2,.9,.25,1) both;
}
.text-effect .fx-ch {
  display: inline-block;
  transform: skewX(-6deg);
  background: linear-gradient(180deg, hsl(292 100% 96%) 0%, hsl(290 100% 74%) 34%, hsl(287 100% 62%) 55%, hsl(284 100% 55%) 74%, hsl(278 90% 50%) 90%, hsl(272 85% 40%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1.6px hsl(270 95% 12%);
  text-shadow: 0 -1px 0 hsl(268 100% 35% / 0.5), 2px 4px 0 hsl(266 100% 14% / 0.65), 4px 7px 0 hsl(264 100% 8% / 0.5), 5px 10px 12px hsl(0 0% 0% / 0.5);
}
.text-effect:hover .fx-slam {
  animation-name: text-effect-slam-r;
}
.text-effect:hover::after {
  animation-name: text-effect-burst-r;
}

@keyframes text-effect-slam {
  0% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  8% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  30% { transform: rotateX(-24deg) scale(1.110); opacity: 1; }
  58% { transform: rotateX(0deg) scale(1.110); opacity: 1; }
  68% { transform: rotateX(0deg) scaleY(0.85) scaleX(1.08); opacity: 1; }
  80% { transform: rotateX(0deg) scaleY(1.06) scaleX(0.97); opacity: 1; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}
@keyframes text-effect-burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  62% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.83; }
  82% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
@keyframes text-effect-slam-r {
  0% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  8% { transform: rotateX(-101deg) scale(1.110); opacity: 0; }
  30% { transform: rotateX(-24deg) scale(1.110); opacity: 1; }
  58% { transform: rotateX(0deg) scale(1.110); opacity: 1; }
  68% { transform: rotateX(0deg) scaleY(0.85) scaleX(1.08); opacity: 1; }
  80% { transform: rotateX(0deg) scaleY(1.06) scaleX(0.97); opacity: 1; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}
@keyframes text-effect-burst-r {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  62% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.83; }
  82% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
</style>

<div class="text-effect"><div class="fx-slam"><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></div>
Category
Entrance & Kinetic
Type
Animated
Browser support
background-clip:text gold fill + 3D perspective transforms (all modern browsers)
Capabilities
perLetter

Related Entrance & Kinetic effects