Stage label cyclerPro
One line that says what a long task is doing now: stage labels roll up as each stage starts, the active one carries the kit's shimmer, and the step count moves with it.
On this page
ProA research answer rolling through reading, drafting, checking and formatting, then done.
Installation
Usage
import { StageLabelCycler } from "@/components/ui/chatcn/pro/stage-label-cycler"
<StageLabelCycler
stages={["Reading sources", "Drafting", "Checking"]}
current={stageIndex}
status={done ? "done" : "running"}
/>The label box is as wide as the longest stage, so the count after it never shifts. Moving back to an earlier stage rolls down instead of up. steps picks a rolling 2/3 count, small segments, both or nothing.
Examples
States
ProStep count, segments, done, failed and a narrow column.
Props
| Prop | Type | Notes |
|---|---|---|
stages | string[] | Required. Present participles read best |
current | number | Required. Index of the active stage |
status | "running" | "done" | "error" | Default running |
doneLabel | string | Default "Done" |
errorLabel | string | Default: Stopped while, plus the stage |
steps | "count" | "segments" | "both" | "none" | Default count |
duration | number | Roll duration in ms. Default 240 |
Accessibility
- A polite live region says Step 2 of 3: Drafting when a stage starts, and the done or failed label at the end.
- Done and failed carry a check or alert icon next to the label, not color alone.
Motion
- The old label slides up and out while the new one slides up from below, 240 ms, clipped to one line. Only the active label shimmers.
- Under reduced motion the new label fades in over 150 ms and the shimmer is static.