Motion

ShimmerText

A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (.t-shimmer).

Crew OS + MaxMotionShowcase pageMarkdown

Usage#

What you provide: the text twice — as children and as data-text (the ::before layer paints the band through background-clip: text).

Anatomy: base text in --shimmer-base (muted-foreground), band in --shimmer-highlight (foreground), 400% band size, 2s linear loop (--shimmer-dur). Stops under reduced motion.

Use it for work in progress that has no percentage. Pair it with what is happening, not just "Loading".

Facts#

ProductCrew OS and Max

FamilyMotion

KindShowcase page (tokens and patterns)

Source: app/transitions.css

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "grid gap-3" },
    h("span", { className: "t-shimmer text-sm font-medium", "data-text": "Max is thinking…" }, "Max is thinking…"),
    h("span", { className: "t-shimmer text-sm", "data-text": "Searching LinkedIn for fintech CFOs in Paris…" }, "Searching LinkedIn for fintech CFOs in Paris…"),
    h("p", { className: "text-xs text-muted-foreground" }, "Base in muted-foreground, band in foreground; stops under reduced motion."));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>