Shatter In
Entrance & Kinetic · Animated · pure CSS
Six or eight glass shards, each a differently clip-path'd copy of the word, fly in from scattered angles and tumble through 3D space before snapping into perfect registration, a bright edge-flash selling the impact. A hard geometric shatter-reassembly entrance whose shards tile the text box exactly once so every glyph lands precisely.
How it works
Shatter In 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
Shatter In exposes 4 dedicated controls — Shards, Fly Distance, Speed and Glass 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
/* Shatter In — 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: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
perspective: 720px;
color: hsl(10 22% 90%);
}
.text-effect .fx-base {
color: transparent;
}
.text-effect .fx-shard {
position: absolute;
inset: 0;
color: hsl(10 22% 90%);
pointer-events: none;
clip-path: var(--clip);
transform-origin: 50% 50%;
will-change: transform, opacity, filter;
animation: text-effect-shatter 1.00s cubic-bezier(.2,.85,.25,1) both;
animation-delay: calc(var(--i) * 0.05s);
}
.text-effect:hover .fx-shard {
animation-name: text-effect-shatter-r;
}
@keyframes text-effect-shatter {
0% { opacity: 0; transform: translate3d(var(--sx), var(--sy), var(--sz)) rotateX(var(--srx)) rotateY(var(--sry)) scale(1.08); }
15% { opacity: 1; }
70% { filter: none; }
76% { opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1); }
84% { filter: brightness(2) drop-shadow(0 0 7px hsl(10 92% 80%)); }
100% { opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1); filter: none; }
}
@keyframes text-effect-shatter-r {
0% { opacity: 0; transform: translate3d(var(--sx), var(--sy), var(--sz)) rotateX(var(--srx)) rotateY(var(--sry)) scale(1.08); }
15% { opacity: 1; }
70% { filter: none; }
76% { opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1); }
84% { filter: brightness(2) drop-shadow(0 0 7px hsl(10 92% 80%)); }
100% { opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1); filter: none; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- clip-path shards + 3D transforms with perspective (all modern browsers)
- Capabilities
- pure