Interaction / component

Thought Line

A breathing reasoning line with a live timer, shimmer, folding trace and a considered completion transition.

Example

Preparing preview…

Take it with you.

SOURCE ACCESS

Preview freely. Unlock the files.

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Component notes

Thought preserves the original breathing, shimmer, timer, folding synthetic trace and visual settlement. These are labelled sample steps, with no internal model reasoning.
Inline/Trace calculate actual Unicode code points, words and lines locally. ActivityStream displays a full caller-retained history; maxVisible hides older rows without deleting them.
mergeActivityEvents validates a whole matching batch atomically, keeps first ID order and takes only greater per-ID sequence revisions. Same revisions are idempotent; foreign requests are ignored.
Use a fresh requestId for each job. Caller completion is authoritative. New activity contexts always use settleAfter=0 and retain results, input and disclosure through Pause/Replay. The untouched legacy Demo explicitly restarts its synthetic scene on Replay.
Full eligible React Bits primitives, helper code, styles, dependency notices and the controlled caller example remain included.

React 19.2Modern browsers

React Bits — David Haz · MIT + Commons Clause; reuse separately authorized. Exact notice bundled.

Hugeicons · MIT; installed packages include their notices.

Props

Prop	Type	Default	Description
`color`	string	`currentColor`	Text; see primitive interface for full options.
`glyphColor`	string	`empty`	Glyph; see primitive interface for full options.
`fontSize`	number	`16`	Text size; see primitive interface for full options.
`settleAfter`	number	`0 (primitive); 8 (legacy Demo)`	Legacy Demo: automatic visual settlement after8 seconds; use0 for caller-controlled ThoughtLine. New Inline/Trace always use0.
`shimmer`	boolean	`True`	Shimmer; see primitive interface for full options.
`showTimer`	boolean	`True`	Timer; see primitive interface for full options.
`paused`	boolean	`false`	Suspend decoration without changing caller state, retained text, local input or results.
`replayToken`	number	`0`	Restart decoration while retaining caller state and local work in the new contexts. Legacy Thought/Lattice Demo explicitly restarts its synthetic interaction.
`label`	string	`Thinking…`	ThoughtLine: working text.
`doneLabel`	string	`automatic`	ThoughtLine: settled text; automatic timer wording when omitted.
`renderLabel`	(text: string, working: boolean) => ReactNode	`undefined`	ThoughtLine: custom presentation of the authoritative state label.
`glyph`	sparkle \| dot \| none \| ReactNode	`sparkle`	ThoughtLine: bundled native glyph choice or caller node.
`steps`	string[]	`[]`	ThoughtLine: caller steps; legacy Demo supplies labelled synthetic steps.
`collapsible`	boolean	`true`	ThoughtLine: allow trace disclosure.
`collapseOnSettle`	boolean	`true`	ThoughtLine: collapse trace on caller/explicit settlement.
`breathPeriod`	number seconds	`1.6`	ThoughtLine: breathing cycle duration.
`breathDepth`	number	`0.45`	ThoughtLine: glyph breathing depth.
`shimmerDuration`	number seconds	`1.8`	ThoughtLine: sheen duration.
`settleDuration`	number milliseconds	`350`	ThoughtLine: settlement transition duration.
`settleBlur`	number pixels	`2`	ThoughtLine: settlement blur.
`working`	boolean	`true`	ThoughtLine: caller-owned running state. New local contexts derive this from actual operations and set settleAfter=0.
`elapsed`	number seconds	`undefined`	ThoughtLine: optional caller-owned elapsed time.
`onSettle`	(seconds: number) => void	`undefined`	ThoughtLine: callback for explicit legacy auto-settlement; no service operation.
`className`	string	`empty`	Additional primitive classes.
`style`	CSSProperties	`undefined`	Additional primitive styles.
`headline`	string	`A little clarity, one step at a time.`	Activity examples: heading.
`requestId`	string	`required`	ActivityStream: fresh caller job identity. Foreign events are ignored.
`events`	readonly ActivityEvent[]	`required`	ActivityStream: full caller-retained history with stable id, nonnegative sequence revision, label, optional detail and queued/running/complete/error/cancelled state.
`state`	idle \| running \| complete \| error \| cancelled	`required`	ActivityStream: authoritative caller request state.
`maxVisible`	number	`20`	ActivityStream: latest visible events, clamped1–100; retained history is not discarded.
`defaultOpen`	boolean	`false`	ActivityStream: initial disclosure; Replay retains subsequent disclosure.