A model reply that types itself. The stream fills a column downward, then wraps into a new column leftward · the answer advances across the page, not down it.

Design question

Horizontal streaming grows the page downward and pins the reader to the bottom edge. On the vertical axis the line is a column: where does a live stream go when it reaches the column's floor, and what shape is the caret on a vertical baseline?

Default

생성 중…

The reply fills its column downward, then wraps into a new column leftward · writing-mode does the layout, no column math. The caret is a horizontal bar under the last glyph.

tsx
1// The column length is fixed · writing-mode wraps the growing
2// text into new columns right-to-left. No column math.
3export function StreamingReply({ shown, done }: { shown: string; done: boolean }) {
4  return (
5    <div
6      aria-busy={!done}
7      style={{
8        writingMode: "vertical-rl",

Guidance

Fix the column length and let vertical-rl wrap the stream into new columns on its own
Rotate the caret with the baseline · a 1em horizontal bar under the last glyph
Anchor the block's right edge so growth reads leftward from the reading start
Set aria-busy while streaming and announce once at completion
Reveal the full text immediately under prefers-reduced-motion

Don't

Compute column breaks in JS · fixed length plus writing-mode already wraps correctly
Blink a vertical beam caret · that is the horizontal baseline's shape
Fire a live-region update per token · screen readers re-read the whole answer
Auto-scroll against the reading direction while the reader is looking back

PreviousMessage Next Thinking Trace

1	// The column length is fixed · writing-mode wraps the growing
2	// text into new columns right-to-left. No column math.
3	export function StreamingReply({ shown, done }: { shown: string; done: boolean }) {
4	return (
5	<div
6	aria-busy={!done}
7	style={{
8	writingMode: "vertical-rl",