Motion
ShimmerText
A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (.t-shimmer).
Guidelines#
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#
| Group | Motion |
|---|---|
| Product | Crew OS and Max |
| Kind | Showcase page (tokens and patterns, not a single export) |
| Source | : app/transitions.css |
Example#
The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.
<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>