Shimmer

UsageCopy Anchor Link

import { Shimmer } from "@gpuixui/components/shimmer";

// A plain string is inked one code point at a time from the travelling profile.
<Shimmer label="Generating a reply" durationMs={2000}>
  Generating a reply…
</Shimmer>;

// A finished surface: the text rests and no profile runs.
<Shimmer active={false}>Done</Shimmer>;

// Composed children cannot be recoloured, so they keep the surface band.
<Shimmer label="Reading the conversation">
  <Card>
    <Text role="body">The assistant is reading the conversation.</Text>
  </Card>
</Shimmer>;

A string child is a text run: every code point is its own text host and takes the profile's ink at its place in the line. Any other child keeps the surface band — a row of thin two-stop ramps over the content — because the runtime cannot recolour a tree it did not build.

Two drawings, honestlyCopy Anchor Link

The browser can put a gradient inside the glyphs with background-clip: text. The native runtime cannot: it has no mask and no background-clip, and a <text> host paints one color. So the native component does the strongest thing it can and says what it is:

• A string child is split into words and code points. Each code point takes one colour sampled from the same triangular profile the band uses, blending from the theme's mutedForeground toward the chosen accent. The sheen is discrete at glyph resolution, not a continuous fill.
• Any other child keeps the band: SHIMMER_STEPS (16) strips, each a two-stop ramp between neighbouring samples of that profile, stepping once per durationMs / SHIMMER_STEPS (125 ms at the default).

The two paths are not the same drawing, and neither is presented as the other. The browser preview puts the gradient in the text; the native string path is the closest the runtime gets to it.

APICopy Anchor Link

Edit this page on GitHubpackages/components/docs/shimmer.mdx