AI Response Stream
Formatted answer blocks that stream in: heading, bullets, code
Here's the plan
Create an AI response that streams in as formatted blocks (not plain word-by-word text): a heading, bullet points, an inline code chip, and a closing paragraph. Blocks appear in order, one every 0.75s. Each block enters by fading in while rising 10px and sharpening from a 3px blur, over 350ms with easing cubic-bezier(0.22, 1, 0.36, 1). While the stream is still going, a caret block (▍) in the accent color blinks (opacity 1 → 0, 0.6s loop) below the last block, and disappears when the stream completes. Style the blocks: the heading is bolder and larger; bullets use an accent-colored dash instead of a dot; the code line sits in a dark rounded chip with a monospace font, sized to its content. Accessibility: wrap the answer in aria-live="polite" and role="log" so streamed blocks are announced in order. If prefers-reduced-motion is set, render the full formatted answer at once with no caret. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.