ShimmerText

A moving gradient shimmer over text — ideal for “AI thinking” labels, loading placeholders, or generative content previews.

Basic Usage

Generating response...

import { ShimmerText } from '@toffee.studio/ai-interaction-design/client'

<ShimmerText tone="brand" speed="slow" variant="strong">
  Generating response...
</ShimmerText>

Gradient Presets

Three ready-to-use color palettes. Use shimmerColor or CSS variable overrides to match your brand.

AI interaction design

<ShimmerText
  tone="neutral"
  speed="slow"
  variant="strong"
  shimmerWidth="wide"
>
  AI interaction design
</ShimmerText>

Direction

Thinking deeply...

<ShimmerText direction="ltr">
  Thinking deeply...
</ShimmerText>

Shimmer Width

Analyzing your data

<ShimmerText shimmerWidth="narrow">
  Analyzing your data
</ShimmerText>

Repeat

Control when the shimmer plays. Reload the page to see once again.

Always shimmering

<ShimmerText repeat="loop">
  Always shimmering
</ShimmerText>

Delay & Stagger

Use delay to cascade multiple elements for a polished entrance.

Generating

your

response...

{['Generating', 'your', 'response...'].map((word, i) => (
  <ShimmerText
    key={word}
    tone="brand"
    speed="slow"
    variant="strong"
    shimmerWidth="wide"
    direction="diagonal"
    delay={i * 200}
  >
    {word}
  </ShimmerText>
))}

Variants

Visual intensity — soft reduces opacity, strong boosts contrast.

Analyzing your request

<ShimmerText variant="default">
  Analyzing your request
</ShimmerText>

Tones

Color palette via CSS variables. Each tone maps to a set of shimmer colors.

Processing data...

<ShimmerText tone="neutral">
  Processing data...
</ShimmerText>

Speeds

Control animation duration. Pass a preset name or a number in milliseconds.

Thinking deeply...

<ShimmerText speed="slow">
  Thinking deeply...
</ShimmerText>

Props

Prop	Type	Default	Description
children	ReactNode	—	Text content to display with shimmer
variant	'default' \| 'soft' \| 'strong'	'default'	Visual intensity — soft reduces opacity, strong boosts contrast
speed	'slow' \| 'normal' \| 'fast' \| number	'normal'	Animation speed (ms if number)
tone	'neutral' \| 'brand' \| 'muted'	'brand'	Color palette via CSS variables
direction	'ltr' \| 'rtl' \| 'diagonal'	'ltr'	Shimmer sweep direction
shimmerWidth	'narrow' \| 'normal' \| 'wide'	'normal'	Width of the light band — narrow is sharp, wide is a soft glow
repeat	'loop' \| 'once' \| 'hover'	'loop'	When the shimmer plays — loop forever, once on mount, or on hover
delay	number	0	Delay in ms before animation starts — use for stagger effects
shimmerColor	string	—	Custom CSS color for the shimmer highlight — overrides tone variables
reducedMotion	boolean \| 'auto'	'auto'	Motion override. 'auto' reads OS preference
className	string	—	Extra CSS class on root
as	React.ElementType	'span'	Polymorphic root element
slots.before	ReactNode	—	Content before shimmer
slots.after	ReactNode	—	Content after shimmer
slots.overlay	(state) => ReactNode	—	Render prop — receives { isAnimating }