Skip to content
Components

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 - "metallic": chrome text for dark surfaces, with a slow champagne-to-steel sheen and a pause between sweeps

Indexing materials…

Usage

import { Shimmer, ShimmerProps, ShimmerVariant } from "@instruments/materia-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.

  • Under reduced motion every variant renders its static base with no sweep. For finite "thinking" states set repeat (e.g. repeat={2}) rather than leaving the default infinite loop running.

  • variant="metallic" is built for dark surfaces only - on a light background the chrome ramp loses contrast. Its own duration and repeatDelay defaults apply only when you pass neither.

  • To sweep several lines in step, pass them one shared progress motion value (0-100) and drive it yourself; a Shimmer given progress never animates on its own.

Props

PropTypeDefaultDescription
asShimmerTag

HTML element 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 (2.4 for "metallic")

progressMotionValue<number>

External 0-100 driver for the band's position: 100 is the band off one edge, 0 off the other. When given, the Shimmer doesn't animate itself (duration, repeat and repeatDelay are ignored), so several lines can share one sweep. Reduced motion still wins.

repeatnumber

Number of times to repeat the animation. Defaults to Infinity

repeatDelaynumber

Delay between repeats in seconds. Defaults to 0 (3.6 for "metallic")

spreadnumber

Spread of shimmer gradient in pixels per character. Defaults to 2.5. Ignored by "metallic".

variantShimmerVariant

Colour variant. Defaults to "light"

Also exports

  • interfaceShimmerProps
  • typeShimmerVariant

Composition

Used by

ThinkingLoader