Scatter Letters Text Hover
The word bursts apart on hover, each letter knocked to its own angle, then springs back into line when the pointer leaves. Offsets live in per-letter custom properties.
Also known as: explode text on hover, letters fly apart, scattered text effect.
Scatter
HTML
<div class="hfx-text-scatter" aria-label="Scatter"><span style="--i: 0; --x: -0.2em; --y: -0.22em; --r: -16deg">S</span><span style="--i: 1; --x: -0.12em; --y: 0.2em; --r: 12deg">c</span><span style="--i: 2; --x: -0.05em; --y: -0.3em; --r: -8deg">a</span><span style="--i: 3; --x: 0em; --y: 0.24em; --r: 20deg">t</span><span style="--i: 4; --x: 0.05em; --y: -0.18em; --r: -14deg">t</span><span style="--i: 5; --x: 0.12em; --y: 0.28em; --r: 9deg">e</span><span style="--i: 6; --x: 0.2em; --y: -0.14em; --r: -18deg">r</span></div>
CSS
.hfx-text-scatter {
--c: var(--hfx-color, #3b82f6);
font-size: calc(var(--hfx-size, 16px) * 2.5);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.15;
cursor: default;
display: inline-flex;}
.hfx-text-scatter span {
display: block;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.hfx-text-scatter:hover span {
transform: translate(var(--x), var(--y)) rotate(var(--r));
}
.hfx-text-scatter:hover span:nth-child(odd) { color: var(--c); }
@media (prefers-reduced-motion: reduce) {
.hfx-text-scatter, .hfx-text-scatter *, .hfx-text-scatter::before, .hfx-text-scatter::after, .hfx-text-scatter *::before, .hfx-text-scatter *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - 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.