CSS text animations
Motion can make one phrase memorable. Keep the message legible when it stops.
Design worth saving.
How to build
Add emphasis to a headline without making it unreadable.
Animate a decorative background through clipped text, then leave readable text as the fallback. The Ward Gradient Ink component provides a static two-tone alternative.
.headline { color: #613db9; background: linear-gradient(90deg, #613db9, #ed876d, #613db9); background-size: 200% 100%; background-clip: text; -webkit-text-fill-color: transparent; animation: ink 6s linear infinite; }
@keyframes ink { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .headline { animation: none; } }