Shimmer

The Shimmer component creates an animated text shimmer effect, commonly used to indicate loading states or add visual emphasis to text elements in AI and chat interfaces.

Usage

With Different Duration

Control the animation speed using the duration prop (in seconds).

With Different Spread

The spread prop controls the width of the shimmer highlight effect. Higher values create a wider shimmer.

With Different Colors

Use the color prop to change the shimmer text color. Uses the same color system as the Text component.

Custom Element Type

Use the as prop to render the shimmer as a different HTML element.

Usage

import { Shimmer } from '@harnessio/ui/components'

// Basic usage
<Shimmer>Generating response...</Shimmer>

// With custom color
<Shimmer color="foreground-1">
  Processing your request...
</Shimmer>

// With custom duration and spread
<Shimmer duration={3} spread={3} color="brand">
  Loading...
</Shimmer>

// As a different element
<Shimmer as="h2" className="text-lg">
  Loading title...
</Shimmer>

API Reference

Props

Prop	Type	Default	Description
children	string	—	The text content to display with the shimmer effect
as	ElementType	"p"	The HTML element type to render
className	string	—	Additional CSS classes to apply
duration	number	2	Animation duration in seconds
spread	number	2	Multiplier for the shimmer highlight width (based on text length)
color	ShimmerColor	"foreground-2"	Text color using the design system color tokens

Color Variants

The color prop accepts the following values:

Value	Description
foreground-1	Primary foreground color
foreground-2	Secondary foreground (default)
foreground-3	Tertiary foreground
foreground-4	Quaternary foreground
disabled	Disabled state color
success	Success state color
warning	Warning state color
danger	Danger state color
brand	Brand color
merged	Merged state color