Shimmer

WorkingReading src/settings/dialog.tsxSummarizing context

import { PineSweep, Shimmer } from "@arcadia/ui";

<div {...sx("cmp-stream", cmp.stream)}>
  <span {...sx("cmp-status", cmp.status)}>
    <PineSweep size="md" /> <Shimmer>Working</Shimmer>
  </span>
  <span {...sx("cmp-status", cmp.status)}>
    <Shimmer>Reading</Shimmer> <span {...sx("cmp-detail", cmp.detail)}>src/settings/dialog.tsx</span>
  </span>
  <span {...sx("cmp-status", cmp.status)}>
    <Shimmer tone="tertiary">Summarizing context</Shimmer>
  </span>
</div>

TSX

import { Shimmer } from "@arcadia/ui";

<Shimmer tone="tertiary">Summarizing context</Shimmer>

The text renders at its tone colour × 60% while one narrow highlight, a rank up, crosses it over 70% of --loop-shimmer (1.6s, half the watch) on --ease-sweep and then rests, so the words stay readable throughout. It runs on the shared clock with the pine sweep and a product's live signal: in the specimen above, the pine's left arm lights as the highlight sets off.

It is a live signal, not decoration: secondary for live tool verbs and "Working", tertiary for tail status. A live Collapsible header uses this same component, so its verb shares the clock too.

Which loader? A Shimmer marks live status text. A Pine Sweep says an agent is running, a Spinner says a control or a small region is busy, and a Skeleton holds the place of content on its way.

Examples

Live to done

active={false} renders plain text in the tone colour with no motion: the same element carries the finished state.

ReadingREADME.md

import { useEffect, useState } from "react";
import { Shimmer, Spinner } from "@arcadia/ui";

function Live() {
  const [done, setDone] = useState(false);
  useEffect(() => {
    const t = setInterval(() => setDone((d) => !d), 2400);
    return () => clearInterval(t);
  }, []);
  return (
    <span {...sx("cmp-status", cmp.status)}>
      {!done && <Spinner size="sm" />}
      <Shimmer active={!done}>{done ? "Read" : "Reading"}</Shimmer>
      <span {...sx("cmp-detail", cmp.detail)}>README.md</span>
    </span>
  );
}

One clock

Every looping Shimmer pins its sweep to the document timeline through useSyncedAnimations, like PineSweep and Spinner: on mount, when it turns active, and whenever the browser restarts the loop later (shown again after display: none, or moved in the DOM).

Reading

import { useEffect, useState } from "react";
import { Shimmer } from "@arcadia/ui";

function Clock() {
  const [lines, setLines] = useState(1);
  useEffect(() => {
    const t = setInterval(() => setLines((n) => (n % 3) + 1), 1300);
    return () => clearInterval(t);
  }, []);
  return (
    <div {...sx("cmp-stream", cmp.stream)}>
      {["Reading", "Searching", "Editing"].slice(0, lines).map((verb) => (
        <span key={verb} {...sx("cmp-status", cmp.status)}><Shimmer>{verb}</Shimmer></span>
      ))}
    </div>
  );
}

However late a line mounts, all of them cross together.

Cost

The highlight is a window over the words that slides one way while a copy of the words inside it slides back: two transforms the compositor runs on its own, so a page of live lines repaints nothing.

A shimmer out of view, or on a hidden window, pauses and rejoins the clock when it comes back.

rootStyle takes layout and the sweep's three colours, each a palette token (the resting words may be one at a share of its strength).

--shimmer-color: PaintDefault var(--text-2); Text colour when still (inactive, reduced motion, forced colours).
--shimmer-base: Paint | FadedDefault color-mix(in srgb, var(--text-2) 60%, transparent); The words between beams.
--shimmer-hi: PaintDefault var(--text-1); The beam.

The sweep is visual only; the words are plain text and read normally. Put the live-region role on the status container, not on the shimmer, and announce a change of step ("Reading", then "Editing") rather than every update. With reduced motion the sweep stops and the text holds its tone colour.

tone: "secondary" | "tertiary"Default "secondary"; secondary: text-2 at rest, sweeping to text-1 (live tool verbs, "Thinking"). tertiary: text-3 sweeping to text-2 (tail status, "Summarizing context").
active: booleanDefault true; Sweep while true. False renders plain text in the tone colour, no motion.
rootStyle: RootStyle<ShimmerKnobs>; Typed StyleX override: layout and the --shimmer-* knobs.
className: string; The part name a parent gives the shimmer it renders (ui-collapsible-action), for its own rules.

Rest props go to <span> props and render.

Usage

Examples

Live to done

One clock

Cost

Customising

Accessibility

API reference

Shimmer