AI chat
Why does a quiet morning feel so different?
An answer written in small, uneven text chunks.
Motion for streamed responses
Let the answer
take shape.
Answers, diagrams and the moments in between.
One response, arriving a little at a time.
Text·Markdown·Images·Charts·Code·Reasoning·Requests
Animated responseBlur + layout motion
Review our launch, explain the numbers and help me prepare the next update.
Plain responseNo content animation
Review our launch, explain the numbers and help me prepare the next update.
Built as it arrives.
Markdown
Turn our rough notes into a small project brief.
Tables, task lists, emphasis and links take shape from incoming Markdown.
Image response
Show me a direction for a coastal campaign.
A streamed image reference resolves into a visual inside the answer.
Live data
How did our first six days go?
Data points arrive individually and the chart builds in the response.
Reasoning
Help me choose what to ship first: search, tags or collections.
A streamed reasoning summary, then the answer. Open or close the summary at any time.
Assistant workflow
Can you tighten the homepage copy? Ask before applying changes.
Provide a sample file, answer a question, approve or decline, then inspect a streamed change preview.
Mermaid diagram
Sketch a small approval flow, then explain it.
Mermaid source streams into a code fence. Once complete, it resolves into a real SVG diagram.
Code answer
Show me a tiny async generator.
A code fence becomes a growing code block, followed by an explanation.
Pull it apart.
See what moves.
Chunks arrive. Your renderer gives them structure. Motion connects each moment to the next. Explore the layers, then replay a little piece of the stream.
About these examples
These demos use the published package plus a small showcase renderer for Markdown, requests, file previews and diagrams. App logic owns the choices; motion owns the transitions. Mermaid loads only for a complete diagram. The rich renderer is a website prototype.
Incoming chunks
An answer arrives in pieces. Keep the stream independent of how you display it.
stream.ts
// SSE, fetch, or any async iterator.
for await (const chunk of incomingStream) {
renderer.append(chunk);
}
// A chunk can end anywhere:
// "An an" → "swer, " → "taking shape."const answer = document.createElement("p");
answer.dataset.streamMorphKey = "answer";
response.append(answer);
for await (const chunk of incomingStream) {
// Keep the existing document connected.
answer.append(chunk);
}import { createStreamMorph } from "stream-morph";
const text = createStreamMorph(response, {
duration: 180,
enterDuration: 240,
});
for await (const chunk of incomingStream) {
text.write(chunk);
}
text.finish(); Live output Ready
"An an"
Building your own response? See the imports and usage guide →
Make it yours.
Edit the Markdown, style the response and tune the stream.