Vibeset

Thinking line

A line that breathes while the agent thinks, with its timer, and beneath it the steps it takes. When done it folds into one sentence ("Thought for 12 s"), with the steps a click away. Whoever uses it tells it the state and the steps; it only draws them, it does not invent steps or guess when a process it does not know ends. The final duration freezes when it turns done: if it kept being computed from the clock, "12 s" would climb to 13, 14, 15 while being read. The sentence is a status region, so a reader hears "Thinking" at the start and the duration at the end, and the timer that changes every second is hidden. If the person opens it by hand, it does not fold itself again when done. And the glyph is not a sparkles badge: three dots, three bars, a cursor or nothing.

And the React Bits original: Thought Line

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Thought Line, and this is what we saw in theirs in case you prefer to use the original.

When to use it

In any interface with an agent or a long-running process, exactly where a spinner goes today. It is among the most useful for anyone building with agents.

Watch out for

Among its glyphs is a sparkles one (SparklesIcon), the "AI" badge many people are tired of: pick another with the glyph prop.

Accessibility

Eight aria signals and reduced motion.