design-infraReport a problem or share feedback← Catalog
Thinking states
curatedfreetransitions/thinking-states
An AI status line that narrates what the agent is doing — "Setting up a workplace", "Running a command", "Browsing files". The line shimmers while a state holds (the same masked highlight as **shimmer text**), then swaps to the next state with the **text states swap** motion: the old line exits up through a small blur while the new one rises in from below.
$
npx skills add Jakubantalik/transitions.dev # then ask: "apply the thinking-states transition"Our notes
Rotating agent thinking labels.- Source
- transitions.dev
- Kind
- transition
- Categories
- transition, loader
- Use as
- recipe — technique you apply to your own markup
- Applies to
- agent-uiloader
- Motion
- on loop, state · subtle · css · low cost · respects reduced motion
- Tags
- css
- Licence
- Free for unlimited personal/commercial use in your products; no republishing the collection. Pro (React/TS variants) $9/mo or $149 lifetime.
- Live demo
- transitions.dev
- Docs
- transitions.dev
Similar
Compare all 4 →- Agent Loading States Thinking Shimmerbeui/thinking-shimmerA quiet agent waiting label. Tie it to actual work and replace it with a useful result or error rather than an endless decorative loop.
- Thinkingbeautifui/thinking-stateExpandable reasoning/search/coding traces — the best open-source 'agent is thinking' panel. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
- Thinking Orbslibrariesdev/thinking-orbsOur default agent-activity indicator; wrapped by @oc/agent-status. Canvas 2D, no WebGL. Also: thinking-orbs-native (RN) and SwiftUI.