AI Streaming Response
A chat answer that thinks, then pours in word by word
Create an AI chat streaming response. A chat exchange where the user's message appears instantly, and the AI's reply first shows a thinking indicator, then streams in word by word. Thinking indicator: three 5px dots bouncing in sequence (translateY -4px, 1.2s ease-in-out loop, 150ms delay between dots). Streaming: reveal the response one word at a time every ~90ms (word-level looks more natural than character-level for AI), with a small accent-colored block cursor at the end of the text while streaming, removed when done. If wiring to a real LLM API, append tokens as they arrive from the stream instead of the timer. Layout: user bubble aligned right (dark background, asymmetric radius with a small corner toward the sender); AI bubble aligned left (card background, hairline border, a tiny 'AI' label with a sparkle icon). Reserve min-height for the AI bubble so the layout doesn't jump when thinking becomes text. Auto-scroll the chat container as text streams, but stop auto-scrolling if the user scrolls up. Under prefers-reduced-motion, show the full response at once with no dots or cursor. 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.