Looking for quick help with the Text Shimmer/Wave Effect?
(FIxed with Claude)
Text Clipped Shimmer Animation
Project settings > Custom scripts
For a text clipped shimmer “e.g. Loading…” add this to the header:
<style>
.wave-text,
.wave-text p,
.wave-text span,
.wave-text * {
background-image: linear-gradient(90deg, #111 30%, #bbb 50%, #111 70%) !important;
background-size: 200% auto !important;
background-position: 200% center;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
animation: gradientWave 1800ms linear infinite !important;
will-change: background-position;
display: inline-block !important;
}
@keyframes gradientWave {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
</style>
and then add the class tag “wave-text” to your element’s class input field. The “!important” tags override WeWeb’s styling
Note: keyframes traveling 200% to -200% (400% total distance). The browser has to reconcile them inconsistently, causing the jerk. Keep everything at 200%:
