Text shimmer ported
Show ongoing work with a calm light across the words.
A calm light sweep across a short status line to show that work is ongoing.
Loading demo…
Guidance
When to use
- Short status lines such as Thinking or Generating summary while work is ongoing.
- Loading states where the text should settle to solid once active turns false.
When not to use
- Use text-morph for completed state changes between two labels.
- Announce completion from your own live region — this component only sets aria-busy.
pnpm add sveltearcUsage
<script lang="ts">
import { TextShimmer } from '$lib/components/text-shimmer';
</script>
<TextShimmer active>Generating summary</TextShimmer>Variants & Examples
Active
Sweep while work is ongoing.
<TextShimmer active>Generating summary</TextShimmer>Idle
Settled to solid once work completes.
<TextShimmer active={false}>Summary ready</TextShimmer>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | – | (Required) The status text. Keep it to one short line. |
active | boolean | true | Sweep while work is ongoing. When false the text settles to solid. |
duration | number | 1.8 | Seconds for one sweep across the text. Phase-1 still-port: parity only, no behaviour yet. |
as | "span" | "p" | "div" | "h2" | "h3" | "h4" | "span" | Wrapper element for the status line. |
class | string | – | Merged onto the wrapper element. |
id | string | – | Forwarded to the wrapper element. |
Accessibility
- The component sets aria-busy while active; announce completion from your own live region.
- A changed label rises in place; keep the text to one short line.
Motion
Phase-1 still-port: the label renders settled with data-state and aria-busy intact and a static solid gradient (the CSS makes text transparent without a background-image, so the component sets one inline). Phase 2 adds the driven sweep, glide-off finish and reduced-motion instant path.
Notes for AI
- Flip active to false when work completes; the band glides off (animated in Phase 2).
- Never pass your own background-image to this component — the label needs the component-owned gradient to stay visible.
Source of truth: registry/components/text-shimmer/text-shimmer.tsx