# Text Shimmer

An animated gradient sweep across a label — the lightest way to signal a quiet in-progress state inline.

<p class="kai-tag-sub">kai-text-shimmer</p>

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

## Preview

> **tip:** 
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

```html
<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

### Fast Sweep with Wide Spread

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

### Narrow, Slow Sweep

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

### 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.

## Props

## Composed from