All components
Shimmer
A GPU-accelerated highlight sweep over inline text for streaming and busy labels.
Generating response…Searching the docs…
Install
1npx stylexblocks add shimmerUsage — Base UI
shimmer.tsx
12345678910111213141516import { Shimmer } from "#components/ui/base-ui/shimmer.tsx";
export function Example() { return ( // The highlight is masked to the glyphs and only animates a transform, // so the sweep runs on the GPU in Chrome/Safari; Firefox falls back to // -moz-element() masking. Reduced motion gets the plain muted text. <> <Shimmer>Generating response…</Shimmer> <Shimmer duration="1.2s" spread="2ch">Searching the docs…</Shimmer> </> );}
// the highlight color is a custom property, overridable per instance:// <Shimmer style={styles.accent}> with { "--shimmer-color": "..." }