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>
  );
}

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).

Takes	Default	Sets
`Paint`	`var(--text-2)`	Text colour when still (inactive, reduced motion, forced colours).
`Paint \| Faded`	`color-mix(in srgb`	The words between beams.
`Paint`	`var(--text-1)`	The beam.

Usage

Examples

Live to done

One clock

Customising

Accessibility

API reference