Font Weight Wave Text
A wave of boldness rolls through the letters, each swelling from thin to black and back. It animates font-weight, which is smooth with a variable system font and steps on older fonts.
Also known as: variable font animation, bold wave text, weight changing text css.
HTML
<div class="txt-font-weight-wave" aria-label="Heavy lifting"><span aria-hidden="true"><span style="--i: 0">H</span><span style="--i: 1">e</span><span style="--i: 2">a</span><span style="--i: 3">v</span><span style="--i: 4">y</span><span style="--i: 5"> </span><span style="--i: 6">l</span><span style="--i: 7">i</span><span style="--i: 8">f</span><span style="--i: 9">t</span><span style="--i: 10">i</span><span style="--i: 11">n</span><span style="--i: 12">g</span></span></div>
CSS
.txt-font-weight-wave {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 200;
line-height: 1.2;
color: var(--c);
}
.txt-font-weight-wave span span {
animation: txt-font-weight-wave-flex 2.4s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.12s - 2.4s);
}
@keyframes txt-font-weight-wave-flex {
0%, 100% { font-weight: 200; color: color-mix(in srgb, var(--c) 70%, transparent); }
50% { font-weight: 900; color: var(--c); }
}
@media (prefers-reduced-motion: reduce) {
.txt-font-weight-wave, .txt-font-weight-wave *, .txt-font-weight-wave::before, .txt-font-weight-wave::after, .txt-font-weight-wave *::before, .txt-font-weight-wave *::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.