Slam Text with Camera Shake
A title drops onto the screen from above the camera, lands hard, and the frame shakes as a flash of light bursts behind it. Plays once and ends still, good for game and trailer intros.
Also known as: impact text animation, text slam effect css, screen shake text.
IMPACT
HTML
<div class="txt-slam-text-shake"><span class="txt-slam-text-shake-word">IMPACT</span></div>
CSS
.txt-slam-text-shake {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.5);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
display: inline-block;
animation: txt-slam-text-shake-shake 0.55s linear 0.3s both;}
.txt-slam-text-shake-word {
position: relative;
isolation: isolate; /* keeps the flash behind the letters, not behind the page */
display: inline-block;
color: var(--c);
letter-spacing: 0.02em;
animation: txt-slam-text-shake-drop 0.45s both;
}
/* a flash of light behind the word at the moment of impact */
.txt-slam-text-shake-word::after {
content: "";
position: absolute;
inset: -0.6em -0.4em;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent);
opacity: 0;
animation: txt-slam-text-shake-flash 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s forwards;
}
@keyframes txt-slam-text-shake-drop {
0% { opacity: 0; transform: scale(3); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
66% { opacity: 1; transform: scale(1); animation-timing-function: ease-out; }
80% { transform: scale(1.06, 0.92); }
100% { opacity: 1; transform: none; }
}
@keyframes txt-slam-text-shake-flash {
0% { opacity: 1; transform: scale(0.6); }
100% { opacity: 0; transform: scale(1.5); }
}
@keyframes txt-slam-text-shake-shake {
0%, 100% { transform: none; }
10% { transform: translate(-0.07em, 0.05em) rotate(-1.4deg); }
24% { transform: translate(0.06em, -0.04em) rotate(1.1deg); }
38% { transform: translate(-0.045em, 0.03em) rotate(-0.7deg); }
52% { transform: translate(0.03em, -0.02em) rotate(0.4deg); }
66% { transform: translate(-0.015em, 0.01em) rotate(-0.2deg); }
80% { transform: translate(0.008em, 0); }
}
@media (prefers-reduced-motion: reduce) {
.txt-slam-text-shake, .txt-slam-text-shake *, .txt-slam-text-shake::before, .txt-slam-text-shake::after, .txt-slam-text-shake *::before, .txt-slam-text-shake *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.