gb_flea/paperclip
1
0
Fork 0
forked from farhoodlabs/paperclip
Code Pull Requests 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
ui/src/index.css
+12 -10
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) {
ui/src/pages/IssueChatUxLab.tsx
+38 -1
View File
@@ -17,7 +17,7 @@ import {
issueChatUxTranscriptsByRunId,
} from "../fixtures/issueChatUxFixtures";
import { cn } from "../lib/utils";
import { Bot, Brain, FlaskConical, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
import { Bot, Brain, FlaskConical, Loader2, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
const noop = async () => {};
@@ -216,6 +216,43 @@ export function IssueChatUxLab() {
</div>
</LabSection>
<LabSection
id="working-tokens"
eyebrow="Status tokens"
title="Working / Worked header verb"
description='The "Working" token uses the shimmer-text gradient sweep to signal an active run. Once the run completes it becomes the static "Worked" token.'
accentClassName="bg-[linear-gradient(180deg,rgba(16,185,129,0.06),transparent_28%),var(--background)]"
>
<div className="grid gap-4 sm:grid-cols-2">
<div className="rounded-xl border border-border/60 bg-accent/10 p-4">
<div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Active run — shimmer
</div>
<div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
<span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
<Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
<span className="shimmer-text">Working</span>
</span>
<span className="text-xs text-muted-foreground/60">for 12s</span>
</div>
</div>
<div className="rounded-xl border border-border/60 bg-accent/10 p-4">
<div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Completed run — static
</div>
<div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
<span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
<span className="flex h-4 w-4 shrink-0 items-center justify-center">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500/70" />
</span>
Worked
</span>
<span className="text-xs text-muted-foreground/60">for 1 min 24s</span>
</div>
</div>
</div>
</LabSection>
<LabSection
id="live-execution"
eyebrow="Primary preview"