Pine sweep
The running indicator: the Arcadia pine, one stroke lit at a time, phase-synced with every loop.
import { PineSweep, PineGlyph } from "@arcadia/ui"The running indicator, drawn from the Arcadia mark: the light rests on one stroke at a time, left arm, pine, right arm, pine, four crossfading beats per half --loop-watch, so it ticks with a product's live horizon and the working-text shimmer. Resting strokes stay at a third, so the silhouette never disappears.
It is neutral (--pine-sweep-color, status-running), never the beacon. StatusDot status="running" renders it in chat rows, and a project row shows it at md while any of its chats runs. In a ListRow it takes the row's icon rank, so the active row above lights it.
Which loader? A Pine Sweep says an agent is running. A Shimmer marks the live status text beside it, a Spinner says a control or a small region is busy, and a Skeleton holds the place of content on its way.
Examples
Beats
One loop is 1.6s, half the shared watch, like a lookout scanning the ridge.
The loop divides the shared clock, so every sweep on screen, a product's live signal and the working-text shimmer restart together.
Pause it and drag through the loop to see each stroke take the light; resting strokes hold at --pine-sweep-rest (.34).
rootStyle takes layout and these knobs. A container that tints its glyphs sets --pine-sweep-ink instead, which every sweep inside it takes: a ListRow's leading slot hands down its icon rank that way.
| Knob | Takes | Default | Sets |
|---|---|---|---|
Ref<IconSize> | var(--icon-sm) | Width; the height follows the mark (740 × 650). | |
Paint | var(--pine-sweep-ink | The ink. A container that tints its glyphs sets --pine-sweep-ink instead (a ListRow's leading slot does). | |
Ref<Duration> | calc(${Ref<Duration>} / ${number})`` | calc(${duration["--loop-watch"] | One loop: four beats. | |
number | 0.34 | A resting stroke's opacity. |
Decorative unless given a label, which makes it an img named "Running". Omit the label when the row already says so. It never flashes: one stroke brightens at a time, slowly. With reduced motion the whole mark holds still at full strength.
PineSweep
size- "sm" | "md" | "lg"Default"sm"
- Width:
sm12px (chat rows, StatusDot),md14px (project rows, a status line),lg20px (panels, empty states). label- string
- Accessible name ("Running"). Omit when the row text already says so.
rootStyle- RootStyle<PineSweepKnobs>
- Typed StyleX override: layout and the
--pine-sweep-*knobs. className- string
- A product's hook class for its own layout rules (a swap pair's glyph).
Rest props go to <span> props and render.