<ShimmerText />

A lightweight animated text treatment for in-progress AI states on both web and mobile, with platform-specific implementations tuned to each UI stack.

<ShimmerText /> is a small component with a big job: it makes waiting states feel alive without adding heavy UI. In TurboStarter AI, it is used when something is actively happening, like reasoning, tool execution, or image analysis, and you want a softer signal than a spinner alone.

ShimmerText component demo

Why it is useful

Shimmer text works best when the UI should feel active but calm. It gives users feedback that something is still in progress without making the interface feel noisy or overloaded.

More subtle than a spinner

It communicates progress without taking over the layout or competing with the actual content.

Works well in AI interfaces

It is especially effective for labels like “thinking”, “analyzing image”, or a tool name that is still running.

Consistent across platforms

Both implementations aim for the same product feel, even though the underlying rendering strategy differs between web and mobile.

Usage

The simplest usage is to wrap a short status string. This works well for inline loading states, trigger labels, and compact assistant UI elements.

import { ShimmerText } from "@workspace/ui-web/ai-elements/shimmer";

export function ThinkingLabel() {
  return <ShimmerText>Thinking...</ShimmerText>;
}

import { ShimmerText } from "@workspace/ui-mobile/ai-elements/shimmer";

export function ThinkingLabel() {
  return <ShimmerText>Thinking...</ShimmerText>;
}

Platform differences

The shared API is intentionally small, but the two implementations expose slightly different customization points because they are solving the effect in different environments.

Web props

The web version expects a string child and supports a few simple tuning options. It is ideal when you want a polished shimmer effect with minimal setup.

Prop	Type	Notes
`children`	`string`	The text content to render.
`as`	`ElementType`	Changes the rendered element, such as `p`, `span`, or `div`.
`className`	`string`	Adds typography or spacing classes.
`duration`	`number`	Controls how long one shimmer cycle takes.
`spread`	`number`	Controls the width of the highlight relative to the text length.

Mobile props

The mobile version is also lightweight, but it includes a few extra controls because the animation is built from a masked gradient rather than CSS background clipping.

Prop	Type	Notes
`children`	`string`	The text content to render.
`className`	`string`	Applies text styling and layout classes.
`duration`	`number`	Controls animation speed.
`direction`	`"ltr" \| "rtl"`	Changes the shimmer direction.
`angle`	`number`	Rotates the gradient used for the highlight.
`highlightWidth`	`number`	Adjusts how wide the bright section of the shimmer appears.

How it works

Both versions aim for the same product outcome, but they get there differently because web and mobile do not offer the same rendering primitives.

On web, the text becomes transparent and is filled by an animated background gradient.
On mobile, the text is used as a mask and an animated gradient moves behind it.
In both cases, the component stays focused on presentation only. It does not manage loading state itself; it simply makes a loading label feel better.

Where it appears

<ShimmerText /> is a foundational helper in the AI UI kit rather than a one-off effect. It shows up in a few different places where the interface benefits from an in-progress label with a little motion.

<AnalyzingImage />

Uses shimmer text to make the image-analysis state feel more intentional.

<Reasoning />

Uses shimmer text while reasoning is still in progress.

<Tool />

Uses shimmer text for tool names while a tool call is still running.