design-infraReport a problem or share feedback← Catalog
Reasoning stream
curatedfreetransitions/reasoning-stream
An agent "thinking out loud" — a small card plays back a stream of reasoning by stepping the transcript up two lines at a time, holding between steps. Soft mask fades at the top and bottom edges sell "more above, more below", and the transcript is cloned once so the loop wraps without a visible jump.
$
npx skills add Jakubantalik/transitions.dev # then ask: "apply the reasoning-stream transition"Our notes
Collapsible reasoning stream motion.- Source
- transitions.dev
- Kind
- transition
- Categories
- transition, ai-chat
- Use as
- recipe — technique you apply to your own markup
- Applies to
- agent-uiai-chat
- Motion
- on state, loop · 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 →- Ai Reasoningsmoothui/ai-reasoningCollapsible reasoning trace: the label shimmers 'Thinking' only while isStreaming, then settles to 'Thought for 3.2s' (measured, or pass duration) and auto-collapses — until the user toggles it, after which it stops deciding for them. Muted-foreground chrome, inherits the theme; no shimmer under reduced motion.
- Template · AI chatoc/template-ai-chatStarter page → app/chat/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 4 @oc blocks. Preview: /templates/template-ai-chat.
- Chat threadoc/chat-threadAI conversation view: user bubbles, assistant turns with markdown-ish text + code blocks, tool-call chips, copy/vote/regenerate actions, @oc/agent-status while pending. Auto-sticks to bottom.