Text Shimmer

kai-text-shimmer

A gradient that sweeps across a word or short phrase — the quietest way to signal “working…” without a spinner stealing the scene.

• Shadow DOM
• Inline span
• Tunable speed
• Tunable spread
• All scalar attributes

Preview

When to use

Place <kai-text-shimmer> inline in a status row, toolbar label, or above a streaming area. It renders as an inline span, so it flows naturally beside text or icons. Swap it for <kai-thinking-bar> when you also need a stop affordance.

Usage

<kai-text-shimmer text="Thinking…" duration="3" spread="20"></kai-text-shimmer>

All props are scalar attributes — set them in HTML or via setAttribute. No JavaScript, no events.

• duration — seconds per sweep (default 4; lower is faster).
• spread — gradient width as a percentage (default 20; 5–45; wider looks softer).
• as — swap the inner element from span to any block tag (e.g. "p") when layout demands it.

Examples

Default

Code

Fast Sweep with Wide Spread

Lower duration to 2 and raise spread to 35 for a softer, quicker sweep — useful for longer phrases.

Code

Narrow, Slow Sweep

spread of 8 with default duration creates a crisp, focused highlight — stays subtle beside dense UI.

Code

Rendered as a Paragraph

as="p" wraps the shimmer in a block element — handy when the label needs to sit on its own line above streaming output.

Code

Props

Property	Type	Default	Notes
text	string	''	The text to shimmer.
as	string	'span'	Element tag to render as (default `span`).
duration	number	4	Animation duration in seconds.
spread	number	20	Gradient spread (5–45).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

TextShimmer

---

Need a hand? Report a bug Ask for help