Generation takes seconds to minutes, and a silent wait reads as failure. The actor can neither judge the answer nor act on it until some of it shows.
Live presentation puts reading and writing on the same surface at the same time, holding the rendering steady enough that a human can follow what’s already there while new content keeps arriving.
This is the during-generation phase that precedes generated content’s post-generation negotiation. While the system is still emitting, the design problem isn’t yet trust or refinement. It’s whether the surface lets the actor read at all.
A streaming surface puts two clocks into one container: the system’s emission rate and the actor’s reading rate. They won’t match, and most of the design work sits on that mismatch. Auto-scrolling chases the newest content while the reader wants to stay where they are. Painting on every token wastes work the browser will redo at its own pace. Announcing every change drowns a screen reader. Running the stream to completion punishes anyone who tries to stop.
Holding the reading position
Auto-scrolling to new content fights the actor whenever they want to review what came earlier. Follow only when they consent: track whether they’re still at the bottom, and read any upward scroll as intent to detach. A small dead zone near the bottom keeps jitter from being misread as deliberate scrolling.
Preserving the reading position is one of the levers for agency; the system shouldn’t redirect the actor’s attention without consent.
TODO: EXAMPLE
Stable layout under growth
Rebuilding the stream on each token forces the browser into continuous layout work and produces visible flicker. Append instead. Extend existing nodes with new text, reserve space for generation-only fixtures (cursor, status indicator), and let growth happen at the edge of the scene rather than throughout.
Generation should add to a stable scene rather than redraw a moving one.
TODO: EXAMPLE
Render rhythm
Tokens can arrive faster than the browser can paint. Updating on every arrival wastes work and looks worse than updating on a clock. Decouple arrival from paint: buffer incoming chunks and flush them once per animation frame. The trade is imperceptible latency for steady rendering, so the surface’s rhythm stays even when the underlying stream stutters.
TODO: EXAMPLE
Stopping cleanly
When the actor aborts a stream, the surface should reach a quiet resting state. Clear the pending buffer, drop the cursor and status indicator, and surface a retry that keeps the original prompt intact.
Accessibility
Live-region semantics (aria-live="polite" with aria-atomic="false") let additions be announced as additions rather than as full re-readings of the growing region. When prefers-reduced-motion is set, render the complete response instantly instead of animating its arrival.
Consequences
- the output is legible as it forms, so the actor can skim ahead of the machine, judge early — and stop early, which is what makes interruption meaningful mid-generation
- reading begins before the whole exists: early text anchors the actor's take even when later text qualifies or contradicts it
- the arrival rhythm is now part of the interface — pace, pauses, and re-layout as content lands are designed properties, not transport details
- once the stream completes, a produced artefact sits on the surface — the move shifts from holding the rendering stable to negotiating what arrived
Resources & references
- Designing stable interfaces for streaming content — Smashing Magazine
- AI UX Playground — Streaming, Interrupt and Resume
- Shape of AI — Controls (pausing mid-stream)
- aiuxdesign.guide — Progressive Enhancement
Appears in
Delegating work
- Following work out of sight, step 1 — Show the work as it happens
Related patterns
Precedes
- Abort — the output is legible as it forms, so the actor can skim ahead of the machine, judge early — and stop early, which is what makes interruption meaningful mid-generation
- Generated content — once the stream completes, a produced artefact sits on the surface — the move shifts from holding the rendering stable to negotiating what arrived
Enacts
- Agency — the actor can steer or interrupt the unfolding stream as it plays
- Temporality — content arrives as it's produced; the actor watches the work unfold live
Complements
- Transparent reasoning — its "stream of thought" mode rides on the same rendering substrate
- Conversation — live presentation is one of the rhythms a conversational turn can take
Related to
- Status feedback — the partial output is itself the progress signal — no separate indicator is needed while it flows
Preceded by
- Agent — generates the stream that this surface presents in flight