ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-17 03:10:38 +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 { @keyframes shimmer-text-slide {
0% { background-position: 200% center; } 0% { background-position: -100% center; }
100% { background-position: -200% center; } 100% { background-position: 200% center; }
} }
.shimmer-text { .shimmer-text {
--shimmer-base: hsl(var(--foreground) / 0.75); --shimmer-base: hsl(var(--foreground));
--shimmer-highlight: hsl(var(--foreground) / 0.3); --shimmer-highlight: hsl(var(--foreground) / 0.35);
background: linear-gradient( background: linear-gradient(
110deg, 90deg,
var(--shimmer-base) 35%, var(--shimmer-base) 0%,
var(--shimmer-base) 40%,
var(--shimmer-highlight) 50%, 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; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -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) { @media (prefers-reduced-motion: reduce) {

39
ui/src/pages/IssueChatUxLab.tsx
View file

@ -17,7 +17,7 @@ import {
issueChatUxTranscriptsByRunId, issueChatUxTranscriptsByRunId,
} from "../fixtures/issueChatUxFixtures"; } from "../fixtures/issueChatUxFixtures";
import { cn } from "../lib/utils"; 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 () => {}; const noop = async () => {};
@ -216,6 +216,43 @@ export function IssueChatUxLab() {
</div> </div>
</LabSection> </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 <LabSection
id="live-execution" id="live-execution"
eyebrow="Primary preview" eyebrow="Primary preview"