Chromatic Wave
Light
.gw-wave {
--gw-shift: 6px;
--gw-height: 12px;
--gw-speed: 1.2s;
--gw-delay: 80ms;
--gw-left: #d4ff00;
--gw-right: #ff3131;
font: 700 clamp(48px, 12vw, 120px)/1 system-ui, sans-serif;
color: #f3f4f6;
letter-spacing: .02em;
}
.gw-wave span {
display: inline-block;
animation: gw-wave var(--gw-speed) ease-in-out infinite;
animation-delay: calc(var(--gw-i) * var(--gw-delay));
text-shadow:
calc(var(--gw-shift) * -1) 0 var(--gw-left),
var(--gw-shift) 0 var(--gw-right);
}
@keyframes gw-wave {
50% { transform: translateY(var(--gw-height)); }
}
@media (prefers-reduced-motion: reduce) {
.gw-wave span { animation: none; }
}
Tweak →