Skip to content

Commit 418bd05

Browse files
authored
refac: refined shimmer effect (open-webui#22516)
Rework shimmer animation timing and gradient for a smoother sweep. Slower start with acceleration through the text using a custom cubic-bezier curve. Softer highlight contrast in both light and dark modes.
1 parent 86cce2c commit 418bd05

1 file changed

Lines changed: 22 additions & 8 deletions

File tree

src/app.css

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -187,31 +187,45 @@ select {
187187

188188
@keyframes shimmer {
189189
0% {
190-
background-position: 200% 0;
190+
background-position: 100% 0;
191191
}
192192
100% {
193-
background-position: -200% 0;
193+
background-position: -100% 0;
194194
}
195195
}
196196

197197
.shimmer {
198-
background: linear-gradient(90deg, #9a9b9e 25%, #2a2929 50%, #9a9b9e 75%);
198+
background: linear-gradient(
199+
110deg,
200+
#b4b4b4 0%,
201+
#b4b4b4 43%,
202+
#e8e8e8 50%,
203+
#b4b4b4 57%,
204+
#b4b4b4 100%
205+
);
199206
background-size: 200% 100%;
200207
background-clip: text;
201208
-webkit-background-clip: text;
202209
-webkit-text-fill-color: transparent;
203-
animation: shimmer 4s linear infinite;
204-
color: #818286; /* Fallback color */
210+
animation: shimmer 1.5s cubic-bezier(0.7, 0, 1, 0.4) infinite;
211+
color: #b4b4b4;
205212
}
206213

207214
:global(.dark) .shimmer {
208-
background: linear-gradient(90deg, #818286 25%, #eae5e5 50%, #818286 75%);
215+
background: linear-gradient(
216+
110deg,
217+
#9a9a9a 0%,
218+
#9a9a9a 43%,
219+
#5e5e5e 50%,
220+
#9a9a9a 57%,
221+
#9a9a9a 100%
222+
);
209223
background-size: 200% 100%;
210224
background-clip: text;
211225
-webkit-background-clip: text;
212226
-webkit-text-fill-color: transparent;
213-
animation: shimmer 4s linear infinite;
214-
color: #a1a3a7; /* Darker fallback color for dark mode */
227+
animation: shimmer 1.5s cubic-bezier(0.7, 0, 1, 0.4) infinite;
228+
color: #9a9a9a;
215229
}
216230

217231
@keyframes smoothFadeIn {

0 commit comments

Comments
 (0)