Skip to content
← Inventory

Shimmer

Animated shimmer effect for text. Creates a gradient sweep animation. Variants: - "light" (default): muted foreground → muted highlight (dark text on light bg) - "dark": gray-400 → foreground (darker sweep on light bg) - "inverted": white text on dark backgrounds

Indexing materials…

Usage

import { Shimmer, ShimmerProps, ShimmerVariant } from "@desk/ui/components/shimmer";

Best practices

  • Reach for Shimmer for in-progress *text* (a "Thinking…"/"Analyzing" sweep); Shine is an occasional attention flick on a surface, and Skeleton is a layout-shaped content placeholder.

  • children must be a plain string — the sweep is a bg-clip-text gradient sized from character count, so element children won't clip correctly.

  • Needs ReducedMotionProvider; for finite "thinking" states set repeat (e.g. repeat={2}) rather than leaving the default infinite loop running.

Props

PropTypeDefaultDescription
asElementType

HTML element or component to render as. Defaults to "span"

children(required)string

Text content to apply shimmer effect to

classNamestring

Additional CSS classes

durationnumber

Animation duration in seconds. Defaults to 1.2

repeatnumber

Number of times to repeat the animation. Defaults to Infinity

repeatDelaynumber

Delay between repeats in seconds. Defaults to 0

spreadnumber

Spread of shimmer gradient in pixels per character. Defaults to 2.5

variantShimmerVariant

Color variant. Defaults to "light"

Also exports

  • interfaceShimmerProps
  • typeShimmerVariant

Composition

Used by

ThinkingLoader