Shimmer

Shimmer wraps inline copy in a sweep highlight across the glyphs. Reach for it when the string is already known but should feel in motion — loading placeholders, emphasis lines, or “generating” states while an agent streams.

Duration, spread, and angle tune the sweep. By default the highlight lightens currentColor, so host the string in muted Text (tone="muted") or muted Title (color="var(--global-muted)"). Pure white or near-white currentColor leaves no room for that boost — the sweep disappears even though the glyphs stay readable. Pass highlightColor when you need a deliberate peak that is not a lightness step from the host.

Because the effect is decorative, pair Shimmer with visible status copy or an aria-busy region when it marks a loading state — the sweep alone does not explain what is loading.

Respect reduced motion: swap to static muted Text when motion would distract. Prefer Skeleton when the content shape is unknown and you need a block placeholder instead of animated known copy.

When to useCopy Anchor Link

• Known status strings that should feel active while work is in progress
• Short emphasis lines where a gradient sweep reads as “live”
• Inline labels next to streaming or generating UI
• Muted host color (or an explicit highlightColor) so the sweep stays visible on dark surfaces

When not to useCopy Anchor Link

• Unknown layout placeholders before content arrives → Skeleton
• Ordinary static body or heading copy → Text / Title
• Default white foreground as the only color with no highlightColor — the lightness boost has nowhere to go
• Nested inside ClampText unless you accept the clip interacting with the moving gradient

RelatedCopy Anchor Link

• Text — muted host (tone="muted") and reduced-motion fallback
• Title — muted heading host (color="var(--global-muted)") for Shimmer children
• Skeleton — block placeholders when the string is not ready
• Motion — duration and reduced-motion foundation

Common examplesCopy Anchor Link

Streaming status labelCopy Anchor Link

A single-line status label with shimmer while an agent response streams. Keep the shimmering line on muted Text, add a static muted explanation beside or below it, then replace with normal answer text when content arrives.

Shimmer in a headingCopy Anchor Link

Wrap Shimmer in a muted Title when the loading string should occupy heading space. Mark the surrounding region busy; leave Shimmer readable.

Ask your agentCopy Anchor Link

While this assistant panel waits, show a shimmering muted "Summarizing your request…" label and a static muted line explaining the wait. Replace with normal answer text when content arrives.