Thought Line

Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into "Thought for 4.2s" through a blur crossfade and the trace folds into it.

Default

The preview loops a run: steps arrive, the line settles and folds, then it starts over. Turn Loop off to drive Working by hand, and click the line to open the trace again.

Customize

LoopWorkingLabelDone Label

Glyph

Ink

Glyph Color

Font Size18px

Breath Period1.6s

Breath Depth0.45

Shimmer

Shimmer Speed1.8s

Settle350ms

Settle Blur2px

Show TimerTraceCollapsible

API Reference

ThoughtLine

Prop	Type	Default	Description
`label`	`string`	`'Thinking…'`	The working line. It breathes, and it is the spoken text.
`doneLabel`	`string`	`''`	The settled line. Empty gives "Thought for", or "Done thinking" without the timer.
`glyph`	`'sparkle' \| 'dot' \| 'none'`	`'sparkle'`	The mark that breathes and dims. Use the glyph slot for a custom one.
`steps`	`string[]`	`[]`	The trace beneath the line. Append as the agent progresses; the last step is current, earlier ones tick.
`collapsible`	`boolean`	`true`	The line becomes a toggle for the trace, with a chevron.
`collapseOnSettle`	`boolean`	`true`	Fold the trace into the line when it settles.
`color`	`string`	`'currentColor'`	The ink of the line and the trace.
`glyphColor`	`string`	`''`	The glyph alone. Empty follows the ink.
`fontSize`	`number`	`16`	Type size in px. Everything scales in em.
`breathPeriod`	`number`	`1.6`	One breath, up and down, in seconds.
`breathDepth`	`number`	`0.45`	How far the glyph and label dim at the trough. 0 is no breath.
`shimmer`	`boolean`	`true`	A band of ink sweeps the working label. The label then leaves the breath to the glyph.
`shimmerDuration`	`number`	`1.8`	One sweep, in seconds.
`settleDuration`	`number`	`350`	The settle chord, in ms: crossfade, dim, glide, fold.
`settleBlur`	`number`	`2`	Blur through the crossfade seam, in px.
`working`	`boolean`	`true`	Working or settled. True again starts a new clock.
`settleAfter`	`number`	`0`	Seconds after which the line settles by itself. 0 waits for working.
`elapsed`	`number`	`undefined`	Controlled seconds. The internal clock never runs.
`showTimer`	`boolean`	`true`	The live clock that freezes into the sentence.

Event	Description
`settle`	Once per settle, with the frozen time in seconds.

Slot	Description
`label`	Wraps either string, for a sheen or a link. Receives { text, working }. Inline content only.
`glyph`	Replaces the mark that breathes and dims.

Accessibility

Keyboard shortcuts and ARIA behavior.

The visible text is hidden from screen readers. A status region announces the working label, then the settled sentence with the time spoken in full.
With a trace, the line is a button with aria-expanded and the trace is hidden while folded.
With prefers-reduced-motion the breath is shallower and slower, and the shimmer and blur are dropped.

Tear Ticket Voice Pill