ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-15 10:30:37 +09:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): improve shimmer gradient and add Working/Worked tokens to Chat UX Lab

Browse source 
Rework the shimmer-text CSS to use a Cursor-style sweep: full-opacity base
with a narrow transparent highlight band that slides across, linear timing,
tighter background-size. Add a "Status tokens" section to the Issue Chat UX
Lab showing both the active shimmer "Working" state and the static "Worked"
state side-by-side for quick visual review.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-08 06:42:25 -05:00
parent 9159b44fcc
commit 2ec2b1f1eb
2 changed files with 50 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

22
ui/src/index.css
View file

@ -294,26 +294,28 @@
}
}
/* Shimmer text effect for active "Working" state */
/* Shimmer text effect for active "Working" state — Cursor-style sweep */
@keyframes shimmer-text-slide {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
0% { background-position: -100% center; }
100% { background-position: 200% center; }
}
.shimmer-text {
--shimmer-base: hsl(var(--foreground) / 0.75);
--shimmer-highlight: hsl(var(--foreground) / 0.3);
--shimmer-base: hsl(var(--foreground));
--shimmer-highlight: hsl(var(--foreground) / 0.35);
background: linear-gradient(
110deg,
var(--shimmer-base) 35%,
90deg,
var(--shimmer-base) 0%,
var(--shimmer-base) 40%,
var(--shimmer-highlight) 50%,
var(--shimmer-base) 65%
var(--shimmer-base) 60%,
var(--shimmer-base) 100%
);
background-size: 250% 100%;
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer-text-slide 2.5s ease-in-out infinite;
animation: shimmer-text-slide 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {